diff --git a/.gitignore b/.gitignore index ada6753..2f2eb3b 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,6 @@ node_modules .cache dist -storybook-static \ No newline at end of file +storybook-static +session.vim + diff --git a/example/index.tsx b/example/index.tsx index 5ed0d2a..1783181 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -1,32 +1,28 @@ import 'react-app-polyfill/ie11'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { IconButton } from '../'; -import { Tooltip } from '../'; +import { Select, Tooltip } from '../'; + +const options = [ + { value: 'chocolate', label: 'Chocolate' }, + { value: 'strawberry', label: 'Strawberry' }, + { value: 'vanilla', label: 'Vanilla' }, +]; const App = () => { + const [value, setValue] = React.useState(''); + return (
-

Tooltips

-
- - Tooltip on the Top - -
-
- - Tooltip on the Bottom - -
-
- - Tooltip on the Left - -
-
- - Tooltip on the Right - + setQuery(target.value)} + className="outline-none w-36 focus-within:no-underline" + style={{ + background: disabled ? '#F5F5F5' : '', + cursor: disabled ? 'not-allowed' : 'auto', + }} + placeholder={placeholder ? placeholder : 'Select...'} + disabled={disabled} + /> + ) : ( + '' + )} + + {isMulti && selecteds.size >= 1 ? ( + (() => { + let selects = Array.from(selecteds); + console.log(value); + + return ( +
+ {selects.map((select) => { + return ( +
{ + selecteds.delete(select); + setSelecteds(selecteds); + //setActive(!active); + setValue(selecteds); + }} + > + {select.label} + +
+ ); + })} +
+ ); + })() + ) : !isMulti ? ( + '' + ) : ( +
+ {placeholder ? placeholder : 'Select...'} +
+ )} +
+
+ {focus && selected !== '' && !isMulti && !disabled ? ( + { + setSelected(''); + setValue(''); + setQuery(''); + }} + className="mr-4" + size={size} + /> + ) : null} + +
+ + + {active && !isMulti && !disabled ? ( +
+
+ {optionsQuery.map((option: Option) => { + return ( + + ); + })} +
+
+ ) : null} + + {active && isMulti && !disabled ? ( +
+
+ {optionsQuery.map((option: Option) => { + return ( + + ); + })} +
+
+ ) : null} + + ); +}; diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx new file mode 100644 index 0000000..bff7afa --- /dev/null +++ b/src/components/Select/index.tsx @@ -0,0 +1,78 @@ +import React, { FC } from 'react'; + +import { SelectComponent } from './SelectComponent'; + +//import ArrowDown from './ArrowDropDown'; + +export interface SelectProps { + size?: 'comfortable' | 'compact'; + style?: any; + className?: any; + full?: boolean; + disabled?: boolean; + id?: string; + options: Array; + value: string | Array; + setValue: Function; + hint?: string; + isMulti?: boolean; + placeholder?: string; +} + +export const Select: FC = ({ + //id, + //children, + size, + //style, + //className, + options, + value, + setValue, + disabled, + isMulti, + hint, + placeholder, +}) => { + const classSizes = + size === 'compact' ? 'py-1.5 px-3 text-sm' : 'py-3 px-6 text-base'; + const classLabel = { + normal: 'font-medium text-black', + disabled: 'font-medium text-gray-400', + }; + + const classHint = { + normal: 'mt-1 font-normal text-gray-500', + disabled: 'mt-1 font-normal text-gray-400', + }; + + return ( +
+

+ Label +

+ {hint ? ( +

+ {hint} +

+ ) : null} + + +
+ ); +}; diff --git a/src/components/Select/test/index.text.jsx b/src/components/Select/test/index.text.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/custom.d.ts b/src/custom.d.ts new file mode 100644 index 0000000..d8072de --- /dev/null +++ b/src/custom.d.ts @@ -0,0 +1,31 @@ +//declare module '*.svg?inline' { +//const content: any +//export default content +//} + +//declare module '*.svg' { +//const content: any +//export default content +//} + +declare module '*.svg' { + import React = require('react'); + export const ReactComponent: React.SFC>; + const src: string; + export default src; +} + +declare module '*.jpg' { + const content: string; + export default content; +} + +declare module '*.png' { + const content: string; + export default content; +} + +declare module '*.json' { + const content: string; + export default content; +} diff --git a/src/index.tsx b/src/index.tsx index a82177c..9a967a8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,6 +9,8 @@ export * from './components/ButtonSwitch'; export * from './components/Link'; // Icon buttons export * from './components/IconButton'; +// Select +export * from './components/Select'; // Tag export * from './components/Tag'; // Tooltip diff --git a/src/utils/searchObjectValues.ts b/src/utils/searchObjectValues.ts new file mode 100644 index 0000000..22ac430 --- /dev/null +++ b/src/utils/searchObjectValues.ts @@ -0,0 +1,59 @@ +function trimString(s: string) { + var l = 0, + r = s.length - 1; + while (l < s.length && s[l] === ' ') l++; + while (r > l && s[r] === ' ') r -= 1; + return s.substring(l, r + 1); +} + +function compareObjects(o1: Array, o2: Array) { + var k = ''; + for (k in o1) if (o1[k] !== o2[k]) return false; + for (k in o2) if (o1[k] !== o2[k]) return false; + return true; +} + +function itemExists(haystack: Array, needle: Object[]) { + for (var i = 0; i < haystack.length; i++) + if (compareObjects(haystack[i], needle)) return true; + return false; +} + +function searchFor(objects: any, toSearch: string) { + var results = []; + toSearch = trimString(toSearch); // trim it + for (var i = 0; i < objects.length; i++) { + for (var key in objects[i]) { + if (objects[i][key].indexOf(toSearch) !== -1) { + if (!itemExists(results, objects[i])) results.push(objects[i]); + } + } + } + return results; +} + +//var options = [ +//{ +//"foo" : "bar", +//"bar" : "sit" +//}, +//{ +//"foo" : "lorem", +//"bar" : "ipsum" +//}, +//{ +//"foo" : "dolor blor", +//"bar" : "amet blo" +//} +//]; + +//const options = [ +//{ value: 'chocolate', label: 'Chocolate' }, +//{ value: 'strawberry', label: 'Strawberry' }, +//{ value: 'vanilla', label: 'Vanilla' }, +//{ value: 'vanilla', label: 'Vanilla' }, +//]; + +//console.log(searchFor(options, 'choco')); + +export default searchFor; diff --git a/stories/Select.stories.tsx b/stories/Select.stories.tsx new file mode 100644 index 0000000..ea0d3fe --- /dev/null +++ b/stories/Select.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Select, SelectProps } from '../src/components/Select'; + +const meta: Meta = { + title: 'Selects', + component: Select, + parameters: { + controls: { expanded: true }, + }, +}; + +export default meta; + +const Template: Story = (args) =>