Production: 0.0.66 (#45)

* feature: Input props add placeholder & onKeyDown * fix: input padding, cursor, placeholderFgColor (#38) * fix: unnecessary type * feature: build docs * fix(Input): bug that user can't drag text (#41) * feature(docs): build new docs * Feature: ✨ New UI MultipleTextInput (#44) * feature: ✨MultipleTextInput * fix: remove react-responsive use window resize event not react-responsive * style: title3 * feature: MultipleTextInputPage * feature: options * fix: add cssStyle to style component * Chore: 📝 0.0.66 docs (#46) chore: 📝 0.0.66 docs Co-authored-by: sehvdi <eric250@naver.com> Co-authored-by: sehvdi <74778253+sehvdi@users.noreply.github.com>
transverse-dev · Jul 20, 2022 · 8eb5b6c · 8eb5b6c
1 parent d6e2c45
commit 8eb5b6c
Show file tree

Hide file tree

Showing 12 changed files with 2,279 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><base href="https://transverse-dev.github.io/evoui/"/><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>EvoUI</title><script>!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="./framework.1c173ba7ebbb319e202f.js"></script><script defer="defer" src="./commons.e482df6099b04bab00bf.js"></script><script defer="defer" src="./main.999676f3344050f7badc.js"></script></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><base href="https://transverse-dev.github.io/evoui/"/><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>EvoUI</title><script>!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="./framework.1c173ba7ebbb319e202f.js"></script><script defer="defer" src="./commons.e482df6099b04bab00bf.js"></script><script defer="defer" src="./main.97d18edf3e2f17783aef.js"></script></head><body><div id="root"></div></body></html>
diff --git a/docs/main.97d18edf3e2f17783aef.js b/docs/main.97d18edf3e2f17783aef.js
diff --git a/src/components/PageComponents/index.tsx b/src/components/PageComponents/index.tsx
@@ -3,4 +3,5 @@ import styled from 'styled-components';
 export const Text = styled.div``;
 export const Title1 = styled.div``;
 export const Title2 = styled.div``;
+export const Title3 = styled.div``;
 export const Divider = styled.div``;
diff --git a/src/components/PageWrapper/index.tsx b/src/components/PageWrapper/index.tsx
@@ -1,4 +1,10 @@
-import { Divider, Text, Title1, Title2 } from 'components/PageComponents';
+import {
+  Divider,
+  Text,
+  Title1,
+  Title2,
+  Title3,
+} from 'components/PageComponents';
 import styled from 'styled-components';
 
 const PageWrapper = styled.div`
@@ -24,6 +30,12 @@ const PageWrapper = styled.div`
     font-weight: 500;
   }
 
+  & ${Title3} {
+    padding-top: 1.25rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
   & ${Divider} {
     height: 1px;
     margin: 0.5rem 0;

diff --git a/src/components/SideMenu/index.tsx b/src/components/SideMenu/index.tsx
@@ -74,6 +74,13 @@ export default function SideMenu() {
           }}>
           Input
         </Item>
+        <Item
+          selected={pathname.split('/')[2] === 'multipletextinput'}
+          onClick={() => {
+            dispatch(push('/components/multipletextinput'));
+          }}>
+          MultipleTextInput
+        </Item>
         <Item
           selected={pathname.split('/')[2] === 'select'}
           onClick={() => {

diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
@@ -18,6 +18,7 @@ import DropdownListPage from 'containers/DropdownListPage';
 import SelectPage from 'containers/SelectPage';
 import { ThemeProvider } from 'evoui';
 import InputPage from 'containers/InputPage';
+import MultipleTextInputPage from 'containers/MultipleTextInputPage';
 
 export default function App() {
   const dispatch = useDispatch();
@@ -52,6 +53,10 @@ export default function App() {
                   render={() => <DropdownListPage />}
                 />
                 <Route path='/components/input' render={() => <InputPage />} />
+                <Route
+                  path='/components/multipletextinput'
+                  render={() => <MultipleTextInputPage />}
+                />
                 <Route
                   path='/components/select'
                   render={() => <SelectPage />}

diff --git a/src/containers/MultipleTextInputPage/index.tsx b/src/containers/MultipleTextInputPage/index.tsx
@@ -0,0 +1,290 @@
+import { useState } from 'react';
+import { cloneDeep } from 'lodash-es';
+
+import styled from 'styled-components';
+
+import { Input, MultipleTextInput } from 'evoui';
+
+import {
+  Divider,
+  Text,
+  Title1,
+  Title2,
+  Title3,
+} from 'components/PageComponents';
+
+const DEFAULT_STATE_COLORS: Array<{
+  state: string;
+  fgColor: string;
+  bgColor: string;
+}> = [
+  { state: 'r', fgColor: '#f3d1c5', bgColor: '#ca4b22' },
+  { state: 'a', fgColor: '#ca4b22', bgColor: '#f3d1c5' },
+  { state: 'i', fgColor: '#ecc12d', bgColor: '#fffae1' },
+  { state: 'n', fgColor: '#2d6974', bgColor: '#c7e0c7' },
+  { state: 'b', fgColor: '#3571d7', bgColor: '#c9ddf4' },
+  { state: 'o', fgColor: '#204cc8', bgColor: '#c2d3f0' },
+  { state: 'w', fgColor: '#4c09e2', bgColor: '#d2c5f7' },
+];
+
+const StateColorsTable = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  row-gap: 6px;
+  width: 100%;
+`;
+
+const StateColorItem = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 8px;
+`;
+
+const StateColorItemState = styled.div<{ fgColor: string; bgColor: string }>`
+  border-radius: 5px;
+  padding: 4px 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  color: ${(props) => props.fgColor};
+  font-size: 0.875rem;
+  white-space: nowrap;
+  background-color: ${(props) => props.bgColor};
+`;
+
+const StateColorItemColorWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 2px;
+`;
+
+const SetItemStateWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 2px;
+  width: 100%;
+`;
+
+const StateColorsInputOverrides = {
+  Root: { css: 'padding: 0; max-width: 100px;' },
+  Input: { css: 'width: 100%;' },
+};
+
+const SetItemStateInputOverrides = {
+  Root: { css: 'padding: 0; width: 280px;' },
+};
+
+export default function InputPage(): JSX.Element {
+  const [items, setItems] = useState<Array<{ value: string; state: string }>>(
+    [],
+  );
+  const [warnItems, setWarnItems] = useState<
+    Array<{ value: string; state: string }>
+  >([]);
+  const [deduplicationItems, setDeduplicationItems] = useState<
+    Array<{ value: string; state: string }>
+  >([]);
+  const [stateColors, setStateColors] =
+    useState<Array<{ state: string; fgColor: string; bgColor: string }>>(
+      DEFAULT_STATE_COLORS,
+    );
+  const [itemConditionalStatement, setItemConditionalStatement] =
+    useState<string>('');
+
+  const setItemState = (): string => {
+    return DEFAULT_STATE_COLORS[
+      Math.floor(Math.random() * DEFAULT_STATE_COLORS.length)
+    ].state;
+  };
+
+  const onStateColorFgChange = (value: string, state: string): void => {
+    let tempStateColors = cloneDeep(stateColors);
+    Object.defineProperty(
+      tempStateColors.find(
+        (tempStateColorItem) => tempStateColorItem.state === state,
+      ),
+      'fgColor',
+      {
+        value,
+        writable: true,
+      },
+    );
+    setStateColors(tempStateColors);
+  };
+
+  const onStateColorBgChange = (value: string, state: string): void => {
+    let tempStateColors = cloneDeep(stateColors);
+    Object.defineProperty(
+      tempStateColors.find(
+        (tempStateColorItem) => tempStateColorItem.state === state,
+      ),
+      'bgColor',
+      {
+        value,
+        writable: true,
+      },
+    );
+    setStateColors(tempStateColors);
+  };
+
+  const checkWarnItem = (value: string): string => {
+    if (
+      itemConditionalStatement.length > 0 &&
+      value.includes(itemConditionalStatement)
+    ) {
+      return 'warn';
+    }
+    return 'default';
+  };
+
+  return (
+    <>
+      <Title1>MultipleTextInput</Title1>
+      <Divider />
+      <Text>MultipleTextInput 컴포넌트입니다.</Text>
+      <div style={{ marginTop: '24px' }} />
+      <MultipleTextInput
+        items={items}
+        onChange={(items) => setItems(items)}
+        setItemState={setItemState}
+        overrides={{ Root: { css: 'max-width: 550px;' } }}
+      />
+
+      <Title2>Props</Title2>
+      <Divider />
+
+      <Title3>placeholder</Title3>
+      <Text>placeholder입니다.</Text>
+      <Text>타입: string</Text>
+      <Text>기본값: ''</Text>
+      <div style={{ marginTop: '24px' }} />
+      <MultipleTextInput
+        items={items}
+        placeholder={
+          items.length === 0
+            ? 'placeholder입니다.(Enter나 Space키로 여러개 입력 가능)'
+            : 'placeholder입니다.'
+        }
+        onChange={(items) => setItems(items)}
+        setItemState={setItemState}
+        overrides={{ Root: { css: 'max-width: 550px;' } }}
+      />
+
+      <Title3>stateColors</Title3>
+      <Text>value의 state마다 색상을 지정할 수 있습니다.</Text>
+      <Text>
+        타입: Array&#60;&#123; state: string; fgColor: string; bgColor: string
+        &#125;&#62;
+      </Text>
+      <Text>
+        기본값: &#91;&#123; state: 'default', fgColor: '#e7d6fe', bgColor:
+        '#555555' &#125;&#93;
+      </Text>
+      <div style={{ marginTop: '24px' }} />
+      <StateColorsTable>
+        {stateColors.slice(0, stateColors.length).map((stateColorItem, i) => (
+          <StateColorItem key={`${stateColorItem.state}_${i}`}>
+            <StateColorItemState
+              fgColor={stateColorItem.fgColor}
+              bgColor={
+                stateColorItem.bgColor
+              }>{`State ${stateColorItem.state}`}</StateColorItemState>
+            <StateColorItemColorWrapper>
+              <p>fgColor:</p>
+              <Input
+                value={stateColorItem.fgColor}
+                placeholder={'#??????'}
+                onChange={(event) =>
+                  onStateColorFgChange(
+                    event.currentTarget.value,
+                    stateColorItem.state,
+                  )
+                }
+                overrides={StateColorsInputOverrides}
+              />
+            </StateColorItemColorWrapper>
+            <StateColorItemColorWrapper>
+              <p>bgColor:</p>
+              <Input
+                value={stateColorItem.bgColor}
+                placeholder={'#??????'}
+                onChange={(event) =>
+                  onStateColorBgChange(
+                    event.currentTarget.value,
+                    stateColorItem.state,
+                  )
+                }
+                overrides={StateColorsInputOverrides}
+              />
+            </StateColorItemColorWrapper>
+          </StateColorItem>
+        ))}
+      </StateColorsTable>
+      <div style={{ marginTop: '24px' }} />
+      <MultipleTextInput
+        items={items}
+        onChange={(items) => setItems(items)}
+        stateColors={stateColors}
+        setItemState={setItemState}
+        overrides={{ Root: { css: 'max-width: 550px;' } }}
+      />
+      <Title3>setItemState</Title3>
+      <Text>
+        값이 입력될때 item의 state를 지정할 수 있습니다.
+        <br />
+        ex) if(value === 'number') return 'number'
+      </Text>
+      <Text>타입: (value: string) =&#62; string(state)</Text>
+      <Text>기본값: undefined</Text>
+      <div style={{ marginTop: '24px' }} />
+      <SetItemStateWrapper>
+        <p>if(</p>
+        <p>value.includes(</p>
+        <Input
+          value={itemConditionalStatement}
+          placeholder={`state가 'warn'으로 표시될 값을 적어주세요`}
+          onChange={(event) =>
+            setItemConditionalStatement(event.currentTarget.value)
+          }
+          overrides={SetItemStateInputOverrides}
+        />
+        <p>) return 'warn'</p>
+      </SetItemStateWrapper>
+      <div style={{ marginTop: '24px' }} />
+      <MultipleTextInput
+        items={warnItems}
+        onChange={(items) => setWarnItems(items)}
+        stateColors={[
+          { state: 'warn', fgColor: '#fffae1', bgColor: '#ecc12d' },
+        ]}
+        setItemState={checkWarnItem}
+        overrides={{ Root: { css: 'max-width: 550px;' } }}
+      />
+      <Title3>options</Title3>
+      <Text>
+        optiions을 사용할 수 있습니다.
+        <br />
+        'deduplication': 중복값을 제외합니다.
+      </Text>
+      <Text>타입: Array&#60;'deduplication'&#62;</Text>
+      <Text>기본값: undefined</Text>
+      <div style={{ marginTop: '24px' }} />
+      <MultipleTextInput
+        items={deduplicationItems}
+        placeholder={
+          deduplicationItems.length === 0
+            ? '중복값은 입력이 불가합니다.'
+            : undefined
+        }
+        onChange={(items) => setDeduplicationItems(items)}
+        options={['deduplication']}
+        overrides={{ Root: { css: 'max-width: 550px;' } }}
+      />
+    </>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><base href="https://transverse-dev.github.io/evoui/"/><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>EvoUI</title><script>!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="./framework.1c173ba7ebbb319e202f.js"></script><script defer="defer" src="./commons.e482df6099b04bab00bf.js"></script><script defer="defer" src="./main.999676f3344050f7badc.js"></script></head><body><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><base href="https://transverse-dev.github.io/evoui/"/><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>EvoUI</title><script>!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="./framework.1c173ba7ebbb319e202f.js"></script><script defer="defer" src="./commons.e482df6099b04bab00bf.js"></script><script defer="defer" src="./main.97d18edf3e2f17783aef.js"></script></head><body><div id="root"></div></body></html>