@webiny/ui 5.26.0-beta.1 → 5.26.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AutoComplete.tsx"],"names":["React","Downshift","Input","classNames","Elevation","Typography","keycode","autoCompleteStyle","suggestionList","getOptionValue","getOptionText","findInAliases","MaterialSpinner","css","menuStyles","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","AutoComplete","inputValue","createRef","previousProps","props","value","options","previousValue","item","find","option","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n top: \"unset !important\",\n bottom: 75\n});\n\nconst listStyles = css({\n \"&.autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\nexport enum Placement {\n top = \"top\",\n bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n placement?: Placement;\n\n /* A callback that is executed each time a value is changed. */\n onChange?: (value: any, selection?: any) => void;\n\n /* If true, will show a loading spinner on the right side of the input. */\n loading?: boolean;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n}\n\ninterface State {\n inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n placement?: Placement;\n}\n\ninterface OptionsListProps {\n placement?: Placement;\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n return (\n <Elevation\n z={1}\n className={classNames({\n [menuStyles]: placement === Placement.top\n })}\n >\n <ul\n className={classNames(\"autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n static defaultProps: Partial<AutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n options: [],\n placement: Placement.bottom,\n /**\n * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as AutoComplete).props)}\n </Typography>\n );\n }\n };\n\n public override state: State = {\n inputValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n downshift: any = React.createRef();\n\n public override componentDidUpdate(previousProps: AutoCompleteProps) {\n const { value, options } = this.props;\n const { value: previousValue } = previousProps;\n\n if (!isEqual(value, previousValue)) {\n let item = null;\n\n if (value) {\n if (typeof value === \"object\") {\n item = value;\n } else {\n item =\n options.find(option => {\n return value === getOptionValue(option, this.props);\n }) || null;\n }\n }\n\n const { current: downshift } = this.downshift;\n downshift && downshift.selectItem(item);\n }\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions({\n options,\n isOpen,\n highlightedIndex,\n selectedItem,\n getMenuProps,\n getItemProps,\n placement\n }: RenderOptionsParams) {\n if (!isOpen) {\n return null;\n }\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n const { renderItem } = this.props;\n\n const filtered = options.filter(item => {\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n\n if (!filtered.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </OptionsList>\n );\n }\n\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n {filtered.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Add \"selected\" class if the item is selected.\n if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n itemClassNames.selected = true;\n }\n\n // Render the item.\n return (\n <li\n key={itemValue}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </OptionsList>\n );\n }\n\n public override render() {\n const {\n className,\n options,\n onChange,\n value,\n // valueProp,\n // textProp,\n onInput,\n validation = {\n isValid: null,\n message: null\n },\n placement,\n ...otherInputProps\n } = this.props;\n\n // Downshift related props.\n const downshiftProps = {\n className: autoCompleteStyle,\n itemToString: (item: any) => getOptionText(item, this.props),\n defaultSelectedItem: value,\n onChange: (selection: string) => {\n if (!selection || !onChange) {\n return;\n }\n onChange(getOptionValue(selection, this.props), selection);\n this.setState(state => ({\n ...state,\n inputValue: \"\"\n }));\n }\n };\n\n return (\n <div className={classNames(autoCompleteStyle, className)}>\n <Downshift {...downshiftProps} ref={this.downshift}>\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n // This prop is above `otherInputProps` since it can be overridden by the user.\n trailingIcon: this.props.loading && <Spinner />,\n ...otherInputProps,\n // @ts-ignore\n validation,\n rawOnChange: true,\n onChange: ev => ev,\n onBlur: ev => ev,\n onFocus: ev => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(ev);\n },\n onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n if (keyCode === \"backspace\") {\n if (onChange) {\n onChange(null);\n }\n setTimeout(() => openMenu(), 50);\n }\n },\n onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n const target = ev.currentTarget;\n const inputValue = target.value || \"\";\n\n // If user pressed 'esc', 'enter' or similar...\n if (\n keyCode &&\n keyCode.length > 1 &&\n keyCode !== \"backspace\"\n ) {\n return;\n }\n\n // If values are the same, exit, do not update current search term.\n if (inputValue === this.state.inputValue) {\n return;\n }\n\n this.setState(\n state => ({\n ...state,\n inputValue\n }),\n () => {\n onInput && onInput(inputValue);\n }\n );\n }\n })}\n />\n {!otherInputProps.disabled &&\n !otherInputProps.readOnly &&\n this.renderOptions({\n ...rest,\n options,\n placement\n })}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n\nexport { AutoComplete };\n"]}
|
|
1
|
+
{"version":3,"sources":["AutoComplete.tsx"],"names":["React","Downshift","Input","classNames","Elevation","Typography","keycode","autoCompleteStyle","suggestionList","getOptionValue","getOptionText","findInAliases","MaterialSpinner","css","menuStyles","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","AutoComplete","inputValue","createRef","previousProps","props","value","options","previousValue","item","find","option","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAkE,WAAlE;AACA,SAASC,KAAT;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT;AACA,SAASC,UAAT;AACA,OAAOC,OAAP,MAAoB,SAApB;AACA,SAASC,iBAAT,EAA4BC,cAA5B;AAEA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,aAAxC;AAEA,OAAOC,eAAP,MAA4B,wBAA5B;AACA,SAASC,GAAT,QAAoB,SAApB;AAEA,IAAMC,UAAU,gBAAGD,GAAG,CAAC;AACnBE,EAAAA,GAAG,EAAE,kBADc;AAEnBC,EAAAA,MAAM,EAAE;AAFW,CAAD,sBAAtB;AAKA,IAAMC,UAAU,gBAAGJ,GAAG,CAAC;AACnB,kCAAgC;AAC5BK,IAAAA,SAAS,EAAE,MADiB;AAE5BC,IAAAA,WAAW,EAAE,CAFe;AAG5B,YAAQ;AACJC,MAAAA,MAAM,EAAE;AADJ;AAHoB;AADb,CAAD,sBAAtB;AAUA,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,KAAAA,S;;AAuBZ,IAAMC,OAAiB,GAAG,SAApBA,OAAoB,GAAM;AAC5B,sBACI,oBAAC,eAAD;AACI,IAAA,IAAI,EAAE,EADV;AAEI,IAAA,YAAY,EAAE,0BAFlB;AAGI,IAAA,YAAY,EAAE,CAHlB;AAII,IAAA,OAAO;AAJX,IADJ;AAQH,CATD;;AAsBA,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAA2C;AAAA,MAAxCC,SAAwC,QAAxCA,SAAwC;AAAA,MAA7BC,YAA6B,QAA7BA,YAA6B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACvF,sBACI,oBAAC,SAAD;AACI,IAAA,CAAC,EAAE,CADP;AAEI,IAAA,SAAS,EAAEvB,UAAU,qBAChBW,UADgB,EACHU,SAAS,KAAKH,SAAS,CAACN,GADrB;AAFzB,kBAMI;AACI,IAAA,SAAS,EAAEZ,UAAU,CAAC,4BAAD,EAA+Bc,UAA/B;AADzB,KAEQQ,YAAY,EAFpB,GAIKC,QAJL,CANJ,CADJ;AAeH,CAhBD;;IAkBMC,Y;;;;;;;;;;;;;;;;4DAkB6B;AAC3BC,MAAAA,UAAU,EAAE;AADe,K;;6EAOd5B,KAAK,CAAC6B,SAAN,E;;;;;;;WAEjB,4BAAmCC,aAAnC,EAAqE;AAAA;;AACjE,wBAA2B,KAAKC,KAAhC;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,OAAf,eAAeA,OAAf;AACA,UAAeC,aAAf,GAAiCJ,aAAjC,CAAQE,KAAR;;AAEA,UAAI,CAAC,SAAQA,KAAR,EAAeE,aAAf,CAAL,EAAoC;AAChC,YAAIC,IAAI,GAAG,IAAX;;AAEA,YAAIH,KAAJ,EAAW;AACP,cAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC3BG,YAAAA,IAAI,GAAGH,KAAP;AACH,WAFD,MAEO;AACHG,YAAAA,IAAI,GACAF,OAAO,CAACG,IAAR,CAAa,UAAAC,MAAM,EAAI;AACnB,qBAAOL,KAAK,KAAKvB,cAAc,CAAC4B,MAAD,EAAS,MAAI,CAACN,KAAd,CAA/B;AACH,aAFD,KAEM,IAHV;AAIH;AACJ;;AAED,YAAiBO,SAAjB,GAA+B,KAAKA,SAApC,CAAQC,OAAR;AACAD,QAAAA,SAAS,IAAIA,SAAS,CAACE,UAAV,CAAqBL,IAArB,CAAb;AACH;AACJ;AAED;AACJ;AACA;;;;WACI,8BAQwB;AAAA;;AAAA,UAPpBF,OAOoB,SAPpBA,OAOoB;AAAA,UANpBQ,MAMoB,SANpBA,MAMoB;AAAA,UALpBC,gBAKoB,SALpBA,gBAKoB;AAAA,UAJpBC,YAIoB,SAJpBA,YAIoB;AAAA,UAHpBlB,YAGoB,SAHpBA,YAGoB;AAAA,UAFpBmB,YAEoB,SAFpBA,YAEoB;AAAA,UADpBpB,SACoB,SADpBA,SACoB;;AACpB,UAAI,CAACiB,MAAL,EAAa;AACT,eAAO,IAAP;AACH;AACD;AACR;AACA;;;AACQ,UAAI,CAAC,KAAKI,KAAL,CAAWjB,UAAZ,IAA0B,CAACK,OAAO,CAACa,MAAvC,EAA+C;AAC3C,4BACI,oBAAC,WAAD;AAAa,UAAA,SAAS,EAAEtB,SAAxB;AAAmC,UAAA,YAAY,EAAEC;AAAjD,wBACI,6CACI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,wCADJ,CADJ,CADJ;AAOH;;AAED,UAAQsB,UAAR,GAAuB,KAAKhB,KAA5B,CAAQgB,UAAR;AAEA,UAAMC,QAAQ,GAAGf,OAAO,CAACgB,MAAR,CAAe,UAAAd,IAAI,EAAI;AACpC;AACA,YAAI,CAAC,MAAI,CAACU,KAAL,CAAWjB,UAAhB,EAA4B;AACxB,iBAAO,IAAP;AACH;;AAED,YAAIO,IAAI,CAACe,OAAT,EAAkB;AACd,iBAAOvC,aAAa,CAACwB,IAAD,EAAO,MAAI,CAACU,KAAL,CAAWjB,UAAlB,CAApB;AACH;;AAED,eAAOlB,aAAa,CAACyB,IAAD,EAAO,MAAI,CAACJ,KAAZ,CAAb,CACFoB,WADE,GAEFC,QAFE,CAEO,MAAI,CAACP,KAAL,CAAWjB,UAAX,CAAsBuB,WAAtB,EAFP,CAAP;AAGH,OAbgB,CAAjB;;AAeA,UAAI,CAACH,QAAQ,CAACF,MAAd,EAAsB;AAClB,4BACI,oBAAC,WAAD;AAAa,UAAA,SAAS,EAAEtB,SAAxB;AAAmC,UAAA,YAAY,EAAEC;AAAjD,wBACI,6CACI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,yBADJ,EAEK,KAAKM,KAAL,CAAWsB,aAFhB,CADJ,CADJ;AAQH;;AAED,0BACI,oBAAC,WAAD;AAAa,QAAA,SAAS,EAAE7B,SAAxB;AAAmC,QAAA,YAAY,EAAEC;AAAjD,SACKuB,QAAQ,CAACM,GAAT,CAAa,UAACnB,IAAD,EAAOoB,KAAP,EAAiB;AAAA;;AAC3B,YAAMC,SAAS,GAAG/C,cAAc,CAAC0B,IAAD,EAAO,MAAI,CAACJ,KAAZ,CAAhC,CAD2B,CAG3B;;AACA,YAAM0B,cAAc,2DACfjD,cADe,EACE,IADF,mDAEHkC,gBAAgB,KAAKa,KAFlB,gDAGN,KAHM,mBAApB,CAJ2B,CAU3B;;AACA,YAAIZ,YAAY,IAAIlC,cAAc,CAACkC,YAAD,EAAe,MAAI,CAACZ,KAApB,CAAd,KAA6CyB,SAAjE,EAA4E;AACxEC,UAAAA,cAAc,CAACC,QAAf,GAA0B,IAA1B;AACH,SAb0B,CAe3B;;;AACA,4BACI;AACI,UAAA,GAAG,EAAEF;AADT,WAEQZ,YAAY,CAAC;AACbW,UAAAA,KAAK,EAALA,KADa;AAEbpB,UAAAA,IAAI,EAAJA,IAFa;AAGbwB,UAAAA,SAAS,EAAExD,UAAU,CAACsD,cAAD;AAHR,SAAD,CAFpB,GAQKV,UAAU,CAACa,IAAX,CAAgB,MAAhB,EAAsBzB,IAAtB,EAA4BoB,KAA5B,CARL,CADJ;AAYH,OA5BA,CADL,CADJ;AAiCH;;;WAED,kBAAyB;AAAA;;AACrB,yBAcI,KAAKxB,KAdT;AAAA,UACI4B,SADJ,gBACIA,SADJ;AAAA,UAEI1B,OAFJ,gBAEIA,OAFJ;AAAA,UAGI4B,SAHJ,gBAGIA,QAHJ;AAAA,UAII7B,KAJJ,gBAIIA,KAJJ;AAAA,UAOI8B,OAPJ,gBAOIA,OAPJ;AAAA,+CAQIC,UARJ;AAAA,UAQIA,UARJ,sCAQiB;AACTC,QAAAA,OAAO,EAAE,IADA;AAETC,QAAAA,OAAO,EAAE;AAFA,OARjB;AAAA,UAYIzC,SAZJ,gBAYIA,SAZJ;AAAA,UAaO0C,eAbP,qDADqB,CAiBrB;;;AACA,UAAMC,cAAc,GAAG;AACnBR,QAAAA,SAAS,EAAEpD,iBADQ;AAEnB6D,QAAAA,YAAY,EAAE,sBAACjC,IAAD;AAAA,iBAAezB,aAAa,CAACyB,IAAD,EAAO,MAAI,CAACJ,KAAZ,CAA5B;AAAA,SAFK;AAGnBsC,QAAAA,mBAAmB,EAAErC,KAHF;AAInB6B,QAAAA,QAAQ,EAAE,kBAACS,SAAD,EAAuB;AAC7B,cAAI,CAACA,SAAD,IAAc,CAACT,SAAnB,EAA6B;AACzB;AACH;;AACDA,UAAAA,SAAQ,CAACpD,cAAc,CAAC6D,SAAD,EAAY,MAAI,CAACvC,KAAjB,CAAf,EAAwCuC,SAAxC,CAAR;;AACA,UAAA,MAAI,CAACC,QAAL,CAAc,UAAA1B,KAAK;AAAA,mDACZA,KADY;AAEfjB,cAAAA,UAAU,EAAE;AAFG;AAAA,WAAnB;AAIH;AAbkB,OAAvB;AAgBA,0BACI;AAAK,QAAA,SAAS,EAAEzB,UAAU,CAACI,iBAAD,EAAoBoD,SAApB;AAA1B,sBACI,oBAAC,SAAD,oBAAeQ,cAAf;AAA+B,QAAA,GAAG,EAAE,KAAK7B;AAAzC,UACK;AAAA,YAAGkC,aAAH,SAAGA,aAAH;AAAA,YAAkBC,QAAlB,SAAkBA,QAAlB;AAAA,YAA+BC,IAA/B;;AAAA,4BACG,8CACI,oBAAC,KAAD,EACQF,aAAa;AACb;AACAG,UAAAA,YAAY,EAAE,MAAI,CAAC5C,KAAL,CAAW6C,OAAX,iBAAsB,oBAAC,OAAD;AAFvB,WAGVV,eAHU;AAIb;AACAH,UAAAA,UAAU,EAAVA,UALa;AAMbc,UAAAA,WAAW,EAAE,IANA;AAObhB,UAAAA,QAAQ,EAAE,kBAAAiB,EAAE;AAAA,mBAAIA,EAAJ;AAAA,WAPC;AAQbC,UAAAA,MAAM,EAAE,gBAAAD,EAAE;AAAA,mBAAIA,EAAJ;AAAA,WARG;AASbE,UAAAA,OAAO,EAAE,iBAAAF,EAAE,EAAI;AACXL,YAAAA,QAAQ;AACRP,YAAAA,eAAe,CAACc,OAAhB,IAA2Bd,eAAe,CAACc,OAAhB,CAAwBF,EAAxB,CAA3B;AACH,WAZY;AAabG,UAAAA,SAAS,EAAE,mBAACH,EAAD,EAA+C;AACtD,gBAAMI,OAAe,GAAG5E,OAAO,CAACwE,EAAD,CAA/B;;AAEA,gBAAII,OAAO,KAAK,WAAhB,EAA6B;AACzB,kBAAIrB,SAAJ,EAAc;AACVA,gBAAAA,SAAQ,CAAC,IAAD,CAAR;AACH;;AACDsB,cAAAA,UAAU,CAAC;AAAA,uBAAMV,QAAQ,EAAd;AAAA,eAAD,EAAmB,EAAnB,CAAV;AACH;AACJ,WAtBY;AAuBbW,UAAAA,OAAO,EAAE,iBAACN,EAAD,EAA+C;AACpD,gBAAMI,OAAe,GAAG5E,OAAO,CAACwE,EAAD,CAA/B;AAEA,gBAAMO,MAAM,GAAGP,EAAE,CAACQ,aAAlB;AACA,gBAAM1D,UAAU,GAAGyD,MAAM,CAACrD,KAAP,IAAgB,EAAnC,CAJoD,CAMpD;;AACA,gBACIkD,OAAO,IACPA,OAAO,CAACpC,MAAR,GAAiB,CADjB,IAEAoC,OAAO,KAAK,WAHhB,EAIE;AACE;AACH,aAbmD,CAepD;;;AACA,gBAAItD,UAAU,KAAK,MAAI,CAACiB,KAAL,CAAWjB,UAA9B,EAA0C;AACtC;AACH;;AAED,YAAA,MAAI,CAAC2C,QAAL,CACI,UAAA1B,KAAK;AAAA,qDACEA,KADF;AAEDjB,gBAAAA,UAAU,EAAVA;AAFC;AAAA,aADT,EAKI,YAAM;AACFkC,cAAAA,OAAO,IAAIA,OAAO,CAAClC,UAAD,CAAlB;AACH,aAPL;AASH;AApDY,WADrB,CADJ,EAyDK,CAACsC,eAAe,CAACqB,QAAjB,IACG,CAACrB,eAAe,CAACsB,QADpB,IAEG,MAAI,CAACC,aAAL,iCACOf,IADP;AAEIzC,UAAAA,OAAO,EAAPA,OAFJ;AAGIT,UAAAA,SAAS,EAATA;AAHJ,WA3DR,CADH;AAAA,OADL,CADJ,CADJ;AAyEH;;;;EAxPsBxB,KAAK,CAAC0F,S;;gBAA3B/D,Y,kBACgD;AAC9CgE,EAAAA,SAAS,EAAE,IADmC;AAE9CC,EAAAA,QAAQ,EAAE,MAFoC;AAG9C3D,EAAAA,OAAO,EAAE,EAHqC;AAI9CT,EAAAA,SAAS,EAAEH,SAAS,CAACL,MAJyB;;AAK9C;AACR;AACA;AACQ+B,EAAAA,UAR8C,sBAQnCZ,IARmC,EAQxB;AAClB,wBACI,oBAAC,UAAD;AAAY,MAAA,GAAG,EAAE;AAAjB,OACKzB,aAAa,CAACyB,IAAD,EAAQ,IAAD,CAAkCJ,KAAzC,CADlB,CADJ;AAKH;AAd6C,C;;AA0PtD,SAASJ,YAAT","sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n top: \"unset !important\",\n bottom: 75\n});\n\nconst listStyles = css({\n \"&.autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\nexport enum Placement {\n top = \"top\",\n bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n placement?: Placement;\n\n /* A callback that is executed each time a value is changed. */\n onChange?: (value: any, selection?: any) => void;\n\n /* If true, will show a loading spinner on the right side of the input. */\n loading?: boolean;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n}\n\ninterface State {\n inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return (\n <MaterialSpinner\n size={24}\n spinnerColor={\"var(--mdc-theme-primary)\"}\n spinnerWidth={2}\n visible\n />\n );\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n placement?: Placement;\n}\n\ninterface OptionsListProps {\n placement?: Placement;\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n return (\n <Elevation\n z={1}\n className={classNames({\n [menuStyles]: placement === Placement.top\n })}\n >\n <ul\n className={classNames(\"autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n static defaultProps: Partial<AutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n options: [],\n placement: Placement.bottom,\n /**\n * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as AutoComplete).props)}\n </Typography>\n );\n }\n };\n\n public override state: State = {\n inputValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n downshift: any = React.createRef();\n\n public override componentDidUpdate(previousProps: AutoCompleteProps) {\n const { value, options } = this.props;\n const { value: previousValue } = previousProps;\n\n if (!isEqual(value, previousValue)) {\n let item = null;\n\n if (value) {\n if (typeof value === \"object\") {\n item = value;\n } else {\n item =\n options.find(option => {\n return value === getOptionValue(option, this.props);\n }) || null;\n }\n }\n\n const { current: downshift } = this.downshift;\n downshift && downshift.selectItem(item);\n }\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions({\n options,\n isOpen,\n highlightedIndex,\n selectedItem,\n getMenuProps,\n getItemProps,\n placement\n }: RenderOptionsParams) {\n if (!isOpen) {\n return null;\n }\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n const { renderItem } = this.props;\n\n const filtered = options.filter(item => {\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n\n if (!filtered.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </OptionsList>\n );\n }\n\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n {filtered.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Add \"selected\" class if the item is selected.\n if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n itemClassNames.selected = true;\n }\n\n // Render the item.\n return (\n <li\n key={itemValue}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </OptionsList>\n );\n }\n\n public override render() {\n const {\n className,\n options,\n onChange,\n value,\n // valueProp,\n // textProp,\n onInput,\n validation = {\n isValid: null,\n message: null\n },\n placement,\n ...otherInputProps\n } = this.props;\n\n // Downshift related props.\n const downshiftProps = {\n className: autoCompleteStyle,\n itemToString: (item: any) => getOptionText(item, this.props),\n defaultSelectedItem: value,\n onChange: (selection: string) => {\n if (!selection || !onChange) {\n return;\n }\n onChange(getOptionValue(selection, this.props), selection);\n this.setState(state => ({\n ...state,\n inputValue: \"\"\n }));\n }\n };\n\n return (\n <div className={classNames(autoCompleteStyle, className)}>\n <Downshift {...downshiftProps} ref={this.downshift}>\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n // This prop is above `otherInputProps` since it can be overridden by the user.\n trailingIcon: this.props.loading && <Spinner />,\n ...otherInputProps,\n // @ts-ignore\n validation,\n rawOnChange: true,\n onChange: ev => ev,\n onBlur: ev => ev,\n onFocus: ev => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(ev);\n },\n onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n if (keyCode === \"backspace\") {\n if (onChange) {\n onChange(null);\n }\n setTimeout(() => openMenu(), 50);\n }\n },\n onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n const target = ev.currentTarget;\n const inputValue = target.value || \"\";\n\n // If user pressed 'esc', 'enter' or similar...\n if (\n keyCode &&\n keyCode.length > 1 &&\n keyCode !== \"backspace\"\n ) {\n return;\n }\n\n // If values are the same, exit, do not update current search term.\n if (inputValue === this.state.inputValue) {\n return;\n }\n\n this.setState(\n state => ({\n ...state,\n inputValue\n }),\n () => {\n onInput && onInput(inputValue);\n }\n );\n }\n })}\n />\n {!otherInputProps.disabled &&\n !otherInputProps.readOnly &&\n this.renderOptions({\n ...rest,\n options,\n placement\n })}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n\nexport { AutoComplete };\n"]}
|
package/ImageUpload/styled.d.ts
CHANGED
|
@@ -4,13 +4,13 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
|
|
|
4
4
|
theme?: object | undefined;
|
|
5
5
|
} & {
|
|
6
6
|
children?: import("react").ReactNode;
|
|
7
|
-
}, "
|
|
7
|
+
}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
9
|
}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
10
10
|
theme?: object | undefined;
|
|
11
11
|
} & {
|
|
12
12
|
children?: import("react").ReactNode;
|
|
13
|
-
}, "
|
|
13
|
+
}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
14
14
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
15
|
}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
16
16
|
export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CircularProgress.tsx"],"names":["React","styled","Spinner","Typography","SpinnerWrapper","width","height","position","background","opacity","top","left","zIndex","transform","display","flexDirection","justifyContent","alignItems","Label","marginTop","CircularProgress","props","label","size","spinnerWidth","spinnerColor","visible","style","defaultProps"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,SAASC,UAAT;AAWA,IAAMC,cAAc,gBAAGH,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCI,EAAAA,KAAK,EAAE,MAD0B;AAEjCC,EAAAA,MAAM,EAAE,MAFyB;AAGjCC,EAAAA,QAAQ,EAAE,UAHuB;AAIjCC,EAAAA,UAAU,EAAE,0BAJqB;AAKjCC,EAAAA,OAAO,EAAE,IALwB;AAMjCC,EAAAA,GAAG,EAAE,CAN4B;AAOjCC,EAAAA,IAAI,EAAE,CAP2B;AAQjCC,EAAAA,MAAM,EAAE,CARyB;AASjC,+BAA6B;AACzBL,IAAAA,QAAQ,EAAE,UADe;AAEzBG,IAAAA,GAAG,EAAE,KAFoB;AAGzBC,IAAAA,IAAI,EAAE,KAHmB;AAIzBE,IAAAA,SAAS,EAAE,uBAJc;AAKzBC,IAAAA,OAAO,EAAE,MALgB;AAMzBC,IAAAA,aAAa,EAAE,QANU;AAOzBC,IAAAA,cAAc,EAAE,QAPS;AAQzBC,IAAAA,UAAU,EAAE;AARa;AATI,CAAjB,CAApB;AAqBA,IAAMC,KAAK,gBAAGjB,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACxBkB,EAAAA,SAAS,EAAE;AADa,CAAjB,CAAX;;AAIA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAC,KAAK,EAAI;AAC/D,MAAQC,KAAR,GAAoED,KAApE,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAoEF,KAApE,CAAeE,IAAf;AAAA,MAAqBC,YAArB,GAAoEH,KAApE,CAAqBG,YAArB;AAAA,MAAmCC,YAAnC,GAAoEJ,KAApE,CAAmCI,YAAnC;AAAA,MAAiDC,OAAjD,GAAoEL,KAApE,CAAiDK,OAAjD;AAAA,MAA0DC,KAA1D,GAAoEN,KAApE,CAA0DM,KAA1D;AACA;AACJ;AACA;;AACI,sBACI,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEA;AAAvB,kBACI;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACI,oBAAC,OAAD;AACI,IAAA,IAAI,EAAEJ,IADV;AAEI,IAAA,YAAY,EAAEE,YAFlB;AAGI,IAAA,YAAY,EAAED,YAHlB;AAII,IAAA,OAAO,EAAEE;AAJb,IADJ,EAOKJ,KAAK,iBACF,oBAAC,KAAD,qBACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAE;AAAjB,KAA8BA,KAA9B,CADJ,CARR,CADJ,CADJ;AAiBH,CAtBD;;AAwBAF,gBAAgB,CAACQ,YAAjB,GAAgC;AAC5BL,EAAAA,IAAI,EAAE,EADsB;AAE5BE,EAAAA,YAAY,EAAE,
|
|
1
|
+
{"version":3,"sources":["CircularProgress.tsx"],"names":["React","styled","Spinner","Typography","SpinnerWrapper","width","height","position","background","opacity","top","left","zIndex","transform","display","flexDirection","justifyContent","alignItems","Label","marginTop","CircularProgress","props","label","size","spinnerWidth","spinnerColor","visible","style","defaultProps"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,SAASC,UAAT;AAWA,IAAMC,cAAc,gBAAGH,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCI,EAAAA,KAAK,EAAE,MAD0B;AAEjCC,EAAAA,MAAM,EAAE,MAFyB;AAGjCC,EAAAA,QAAQ,EAAE,UAHuB;AAIjCC,EAAAA,UAAU,EAAE,0BAJqB;AAKjCC,EAAAA,OAAO,EAAE,IALwB;AAMjCC,EAAAA,GAAG,EAAE,CAN4B;AAOjCC,EAAAA,IAAI,EAAE,CAP2B;AAQjCC,EAAAA,MAAM,EAAE,CARyB;AASjC,+BAA6B;AACzBL,IAAAA,QAAQ,EAAE,UADe;AAEzBG,IAAAA,GAAG,EAAE,KAFoB;AAGzBC,IAAAA,IAAI,EAAE,KAHmB;AAIzBE,IAAAA,SAAS,EAAE,uBAJc;AAKzBC,IAAAA,OAAO,EAAE,MALgB;AAMzBC,IAAAA,aAAa,EAAE,QANU;AAOzBC,IAAAA,cAAc,EAAE,QAPS;AAQzBC,IAAAA,UAAU,EAAE;AARa;AATI,CAAjB,CAApB;AAqBA,IAAMC,KAAK,gBAAGjB,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACxBkB,EAAAA,SAAS,EAAE;AADa,CAAjB,CAAX;;AAIA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAC,KAAK,EAAI;AAC/D,MAAQC,KAAR,GAAoED,KAApE,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAoEF,KAApE,CAAeE,IAAf;AAAA,MAAqBC,YAArB,GAAoEH,KAApE,CAAqBG,YAArB;AAAA,MAAmCC,YAAnC,GAAoEJ,KAApE,CAAmCI,YAAnC;AAAA,MAAiDC,OAAjD,GAAoEL,KAApE,CAAiDK,OAAjD;AAAA,MAA0DC,KAA1D,GAAoEN,KAApE,CAA0DM,KAA1D;AACA;AACJ;AACA;;AACI,sBACI,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEA;AAAvB,kBACI;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACI,oBAAC,OAAD;AACI,IAAA,IAAI,EAAEJ,IADV;AAEI,IAAA,YAAY,EAAEE,YAFlB;AAGI,IAAA,YAAY,EAAED,YAHlB;AAII,IAAA,OAAO,EAAEE;AAJb,IADJ,EAOKJ,KAAK,iBACF,oBAAC,KAAD,qBACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAE;AAAjB,KAA8BA,KAA9B,CADJ,CARR,CADJ,CADJ;AAiBH,CAtBD;;AAwBAF,gBAAgB,CAACQ,YAAjB,GAAgC;AAC5BL,EAAAA,IAAI,EAAE,EADsB;AAE5BE,EAAAA,YAAY,EAAE,0BAFc;AAG5BD,EAAAA,YAAY,EAAE,CAHc;AAI5BE,EAAAA,OAAO,EAAE;AAJmB,CAAhC;AAOA,eAAeN,gBAAf","sourcesContent":["// This is just to center the spinner\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Spinner from \"react-spinner-material\";\nimport { Typography } from \"../Typography\";\n\ninterface CircularProgressProps {\n label?: React.ReactNode;\n size?: number;\n spinnerColor?: string;\n spinnerWidth?: number;\n visible?: boolean;\n style?: React.CSSProperties;\n}\n\nconst SpinnerWrapper = styled(\"div\")({\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n background: \"var(--mdc-theme-surface)\",\n opacity: 0.92,\n top: 0,\n left: 0,\n zIndex: 3,\n \"& .spinner__inner-wrapper\": {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\"\n }\n});\n\nconst Label = styled(\"div\")({\n marginTop: 15\n});\n\nconst CircularProgress: React.FC<CircularProgressProps> = props => {\n const { label, size, spinnerWidth, spinnerColor, visible, style } = props;\n /**\n * We can safely cast because we have default props\n */\n return (\n <SpinnerWrapper style={style}>\n <div className={\"spinner__inner-wrapper\"}>\n <Spinner\n size={size as number}\n spinnerColor={spinnerColor as string}\n spinnerWidth={spinnerWidth as number}\n visible={visible as boolean}\n />\n {label && (\n <Label>\n <Typography use={\"overline\"}>{label}</Typography>\n </Label>\n )}\n </div>\n </SpinnerWrapper>\n );\n};\n\nCircularProgress.defaultProps = {\n size: 45,\n spinnerColor: \"var(--mdc-theme-primary)\",\n spinnerWidth: 4,\n visible: true\n};\n\nexport default CircularProgress;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "5.26.0-beta.
|
|
3
|
+
"version": "5.26.0-beta.2",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -91,11 +91,11 @@
|
|
|
91
91
|
"@types/react-custom-scrollbars": "^4.0.10",
|
|
92
92
|
"@types/react-transition-group": "^4.4.4",
|
|
93
93
|
"@types/shortid": "^0.0.29",
|
|
94
|
-
"@webiny/cli": "^5.26.0-beta.
|
|
95
|
-
"@webiny/form": "^5.26.0-beta.
|
|
96
|
-
"@webiny/project-utils": "^5.26.0-beta.
|
|
97
|
-
"@webiny/storybook-utils": "^5.26.0-beta.
|
|
98
|
-
"@webiny/validation": "^5.26.0-beta.
|
|
94
|
+
"@webiny/cli": "^5.26.0-beta.2",
|
|
95
|
+
"@webiny/form": "^5.26.0-beta.2",
|
|
96
|
+
"@webiny/project-utils": "^5.26.0-beta.2",
|
|
97
|
+
"@webiny/storybook-utils": "^5.26.0-beta.2",
|
|
98
|
+
"@webiny/validation": "^5.26.0-beta.2",
|
|
99
99
|
"babel-loader": "^8.0.0-beta.6",
|
|
100
100
|
"babel-plugin-emotion": "^9.2.8",
|
|
101
101
|
"execa": "^5.0.0",
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
]
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "2bf6b56823a2ccb4e95ad747564d2a240d5043ab"
|
|
146
146
|
}
|