@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/common/item-selector/accessor.ts

@@ -0,0 +1,45 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const Accessor = {
+  IDENTITY_FN: input => input.value || input,
+
+  generateAccessor: (field: string) => (object: object) => object[field],
+
+  generateOptionToStringFor: function generateOptionToStringFor(prop) {
+    if (typeof prop === 'string') {
+      return this.generateAccessor(prop);
+    } else if (typeof prop === 'function') {
+      return prop;
+    }
+    return this.IDENTITY_FN;
+  },
+
+  valueForOption: (option, object) => {
+    if (typeof option === 'string') {
+      return object[option];
+    } else if (typeof option === 'function') {
+      return option(object);
+    }
+    return object;
+  }
+};
+
+export default Accessor;

package/src/components/common/item-selector/chickleted-input.tsx

@@ -0,0 +1,153 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {ElementType, MouseEventHandler, ReactNode} from 'react';
+
+import styled from 'styled-components';
+import Delete from '../icons/delete';
+import {FormattedMessage} from 'localization';
+
+interface ChickletedInput {
+  // required properties
+  onClick: MouseEventHandler<HTMLDivElement>;
+  removeItem: Function;
+
+  // optional properties
+  selectedItems?: any[];
+  disabled?: boolean;
+  displayOption?: Function;
+  focus?: boolean;
+  error?: boolean;
+  placeholder?: string;
+  inputTheme?: string;
+  CustomChickletComponent?: ElementType;
+  className?: string;
+}
+
+interface ChickletButtonProps {
+  inputTheme?: string;
+}
+
+export const ChickletButton = styled.div<ChickletButtonProps>`
+  background: ${props =>
+    props.inputTheme === 'light' ? props.theme.chickletBgdLT : props.theme.chickletBgd};
+  border-radius: 1px;
+  color: ${props =>
+    props.inputTheme === 'light' ? props.theme.textColorLT : props.theme.textColor};
+  font-size: 11px;
+  line-height: 20px;
+  margin: 4px 10px 4px 3px;
+  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+  max-width: calc(100% - 8px);
+
+  :hover {
+    color: ${props =>
+      props.inputTheme === 'light' ? props.theme.textColorHlLT : props.theme.textColorHl};
+  }
+`;
+
+export const ChickletTag = styled.span`
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+
+  :hover {
+    overflow: visible;
+  }
+`;
+
+interface ChickletProps {
+  disabled?: boolean;
+  name: ReactNode;
+  remove?: MouseEventHandler<SVGSVGElement>;
+  inputTheme?: string;
+}
+
+const Chicklet = ({disabled, name, remove, inputTheme}: ChickletProps) => (
+  <ChickletButton inputTheme={inputTheme}>
+    <ChickletTag>{name}</ChickletTag>
+    <Delete onClick={disabled ? undefined : remove} />
+  </ChickletButton>
+);
+
+interface ChickletedInputContainerProps {
+  inputTheme?: string;
+  hasPlaceholder?: boolean;
+}
+
+const ChickletedInputContainer = styled.div<ChickletedInputContainerProps>`
+  ${props =>
+    props.inputTheme === 'secondary'
+      ? props.theme.secondaryChickletedInput
+      : props.inputTheme === 'light'
+      ? props.theme.chickletedInputLT
+      : props.theme.chickletedInput}
+
+  color: ${props =>
+    props.hasPlaceholder ? props.theme.selectColorPlaceHolder : props.theme.selectColor};
+  overflow: hidden;
+`;
+
+const ChickletedInput = ({
+  disabled,
+  onClick,
+  className,
+  selectedItems = [],
+  placeholder = '',
+  removeItem,
+  displayOption = d => d,
+  inputTheme,
+  CustomChickletComponent
+}: ChickletedInput) => (
+  <ChickletedInputContainer
+    className={`${className} chickleted-input`}
+    onClick={onClick}
+    inputTheme={inputTheme}
+    hasPlaceholder={!selectedItems || !selectedItems.length}
+  >
+    {selectedItems.length > 0 ? (
+      selectedItems.map((item, i) => {
+        const chickletProps = {
+          inputTheme,
+          disabled,
+          key: `${displayOption(item)}_${i}`,
+          name: displayOption(item),
+          displayOption,
+          item,
+          remove: e => removeItem(item, e)
+        };
+        return CustomChickletComponent ? (
+          <CustomChickletComponent {...chickletProps} />
+        ) : (
+          <Chicklet {...chickletProps} />
+        );
+      })
+    ) : (
+      <span className={`${className} chickleted-input__placeholder`}>
+        <FormattedMessage id={placeholder || 'placeholder.enterValue'} />
+      </span>
+    )}
+  </ChickletedInputContainer>
+);
+
+export default ChickletedInput;

package/src/components/common/item-selector/dropdown-list.tsx

@@ -0,0 +1,269 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, ElementType, createRef} from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import ItemSelectorSubmenu from './item-selector-submenu';
+import {ChevronRight} from 'components/common/icons';
+import {FIELD_AGGREGATORS} from 'constants/default-settings';
+import Portaled from '../portaled';
+
+export const classList = {
+  list: 'list-selector',
+  listHeader: 'list__header',
+  listSection: 'list__section',
+  listItem: 'list__item',
+  listItemAnchor: 'list__item__anchor'
+};
+
+const defaultDisplay = d => d.value || d;
+
+const Divider = styled.div`
+  border-top: 1px solid rgba(44, 48, 50, 0.12);
+  margin: 8px 0;
+`;
+
+export const ListItem = ({value, displayOption = defaultDisplay, light}) => (
+  <span className={classList.listItemAnchor}>{displayOption(value)}</span>
+);
+
+interface DropdownListWrapperProps {
+  light?: boolean;
+}
+
+const DropdownListWrapper = styled.div<DropdownListWrapperProps>`
+  background-color: ${props =>
+    props.light ? props.theme.dropdownListBgdLT : props.theme.dropdownListBgd};
+  border-top: 1px solid
+    ${props =>
+      props.light ? props.theme.dropdownListBorderTopLT : props.theme.dropdownListBorderTop};
+  ${props => (props.light ? props.theme.dropdownListLT : props.theme.dropdownList)};
+`;
+
+const DropdownListContainer = styled.div`
+  position: relative;
+`;
+
+const Item = styled.div`
+  position: relative;
+  padding-right: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  svg {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.6;
+  }
+  &:hover, &.hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`;
+
+interface DropdownListProps {
+  options?: any[];
+  subOptions?: any[];
+  allowCustomValues?: number;
+  customClasses?: object;
+  customValues?: any[];
+  customListItemComponent?: ElementType;
+  customListHeaderComponent?: ElementType;
+  selectionIndex?: number;
+  onOptionSelected?: Function;
+  displayOption?: Function;
+  defaultClassNames?: boolean;
+  areResultsTruncated?: boolean;
+  resultsTruncatedMessage?: string;
+  listItemComponent?: Function;
+  light?: boolean;
+  fixedOptions?: any[];
+  searchEntryValue?: string;
+  withSubOptions?: boolean;
+};
+
+export default class DropdownList extends Component<DropdownListProps> {
+  static defaultProps = {
+    customClasses: {},
+    customListItemComponent: ListItem,
+    customListHeaderComponent: null,
+    allowCustomValues: 0,
+    customValues: [],
+    displayOption: defaultDisplay,
+    onOptionSelected: () => {},
+    defaultClassNames: true,
+    selectionIndex: null,
+    withSubOptions: false
+  };
+
+  state = {
+    currentOption: {} as any,
+    submenuVisible: false,
+    submenuPosition: {} as {left: number, top: number}
+  };
+
+  hasSubOptions = !!this.props.subOptions;
+
+  ref = createRef<HTMLDivElement>();
+
+  _resetState(callback?) {
+    this.setState({currentOption: {}, submenuVisible: false, submenuPosition: {}}, callback);
+  }
+
+  _onClick(option, subOption, event) {
+    const optionSelected =
+      typeof option !== 'object'
+        ? option
+        : {
+            ...option,
+            selectedAggregator: subOption?.id
+          };
+    if (
+      (this.props.withSubOptions && (subOption?.id || !option.aggregators)) ||
+      !this.props.withSubOptions
+    ) {
+      event.preventDefault();
+      this.props.onOptionSelected?.(optionSelected, event);
+    }
+  }
+
+  _onMouseOver(option, event) {
+    const el = event.target
+    this.setState((previousState) => ({
+      currentOption: option,
+      submenuVisible: true,
+      submenuPosition: {
+        top: el.getBoundingClientRect().top,
+        left: (previousState as any).submenuPosition.left ?(previousState as any).submenuPosition.left : this.ref.current?.getBoundingClientRect().right
+      }
+    }));
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.searchEntryValue !== this.props.searchEntryValue) {
+      this._resetState();
+    }
+  }
+
+  componentDidMount() {
+    this.setState({
+      subMenuPosition: { left: this.ref.current?.getBoundingClientRect().right }
+    })
+  }
+
+  render() {
+    const {
+      fixedOptions,
+      light,
+      allowCustomValues = 0,
+      customListItemComponent: CustomListItemComponent = ListItem
+    } = this.props;
+    const {displayOption: display = defaultDisplay} = this.props;
+
+    // Don't render if there are no options to display
+    if (!this.props.options?.length && allowCustomValues <= 0) {
+      return false;
+    }
+
+    const valueOffset = Array.isArray(fixedOptions) ? fixedOptions.length : 0;
+
+    // For some reason onClick is not fired when clicked on an option
+    // onMouseDown is used here as a workaround of #205 and other
+    return (
+      <DropdownListContainer onMouseLeave={() => this._resetState()}>
+        <DropdownListWrapper className={classList.list} light={light}>
+          {this.props.customListHeaderComponent ? (
+            <div className={classList.listHeader}>
+              <this.props.customListHeaderComponent />
+            </div>
+          ) : null}
+          <div ref={this.ref}>
+            {valueOffset > 0 ? (
+              <div className={classList.listSection}>
+                {fixedOptions?.map((value, i) => (
+                  <div
+                    className={classNames(classList.listItem, {
+                      active: this.props.selectionIndex === i,
+                      hover: value.id && (this.state.currentOption?.id === value.id),
+                      fixed: true
+                    })}
+                    key={`${display(value)}_${i}`}
+                    onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                    onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                    onMouseEnter={e => this._onMouseOver(value, e)}
+                  >
+                    <CustomListItemComponent value={value} displayOption={display} />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+
+            {this.props.options?.map((value, i) => (
+              <div key={`${display(value)}_${i}`}>
+                {value.divider && <Divider />}
+                <Item
+                  className={classNames(classList.listItem, {
+                    active: this.props.selectionIndex === i + valueOffset,
+                    hover: value.id && (this.state.currentOption?.id === value.id)
+                  })}
+                  onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                  onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                  onMouseEnter={e => this._onMouseOver(value, e)}
+                >
+                  <CustomListItemComponent value={value} displayOption={display} />
+                  {this.props.withSubOptions && value.aggregators && <ChevronRight />}
+                </Item>
+              </div>
+            ))}
+          </div>
+        </DropdownListWrapper>
+        {this.props.withSubOptions && (
+          // The display: 'none' is a trick to be able to render the ItemSelectorSubmenu in the correct position
+          // Even with display: 'none' the Portaled component render its child on the top of the DOM
+          <div style={{display: 'none'}}>
+            <Portaled
+              isOpened={this.state.currentOption && this.state.currentOption.aggregators}
+              left={this.state.submenuPosition.left}
+              top={this.state.submenuPosition.top}
+              modalStyle={{
+                overlay: {
+                  width: 0,
+                  height: 0
+                } as any
+              }}
+            >
+              <ItemSelectorSubmenu
+                position={this.state.submenuPosition}
+                options={this.state.currentOption?.aggregators?.map(a =>
+                  FIELD_AGGREGATORS.find(am => am.id === a)
+                )}
+                onClick={(aggregator, e) => this._onClick(this.state.currentOption, aggregator, e)}
+              />
+            </Portaled>
+          </div>
+        )}
+      </DropdownListContainer>
+    );
+  }
+}

package/src/components/common/item-selector/item-selector-submenu.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2022 Uber Technologies, Inc.
+// Copyright (c) 2021 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -34,6 +34,7 @@ const ItemSelectorSubmenuStyled = styled.div`
 
 class ItemSelectorSubmenu extends Component {
   static propTypes = {
+    // eslint-disable-next-line react/forbid-prop-types
     options: PropTypes.array,
     onClick: PropTypes.func
   };

package/src/components/common/item-selector/item-selector.d.ts

@@ -1,34 +1,31 @@
 import {FunctionComponent, ComponentType} from 'react';
 
 export type ItemSelectorProps = {
-  selectedItems: ReadonlyArray<string | number | boolean | object>,
-  options: ReadonlyArray<string | number | boolean | object>,
-  onChange: (items: ReadonlyArray<string | number | boolean | object>) => void,
-  fixedOptions?: any[],
-  erasable?: boolean,
-  showArrow?: boolean,
-  searchable?: boolean,
-  displayOption?: string | ((opt: any) => any),
-  getOptionValue?: string | ((opt: any) => any),
-  filterOption?: string | ((opt: any) => any),
-  placement?: string,
-  disabled?: boolean,
-  isError?: boolean,
-  isLoading?: boolean,
-  multiSelect?: boolean,
-  inputTheme?: string,
-  size?: string,
-  onBlur?: () => void,
-  placeholder?: string,
-  closeOnSelect?: boolean,
-  typeaheadPlaceholder?: string,
-  DropdownHeaderComponent?: ComponentType<any> | null,
-  DropDownRenderComponent?: ComponentType<any>,
-  DropDownLineItemRenderComponent?: ComponentType<any>,
-  CustomChickletComponent?: ComponentType<any>,
-  withSubOptions?: boolean
+  selectedItems: ReadonlyArray<string | number | boolean | object>;
+  options: ReadonlyArray<string | number | boolean | object>;
+  onChange: (items: ReadonlyArray<string | number | boolean | object>) => void;
+  fixedOptions?: any[];
+  erasable?: boolean;
+  showArrow?: boolean;
+  searchable?: boolean;
+  displayOption?: string | ((opt: any) => any);
+  getOptionValue?: string | ((opt: any) => any);
+  filterOption?: string | ((opt: any) => any);
+  placement?: string;
+  disabled?: boolean;
+  isError?: boolean;
+  multiSelect?: boolean;
+  inputTheme?: string;
+  size?: string;
+  onBlur?: () => void;
+  placeholder?: string;
+  closeOnSelect?: boolean;
+  typeaheadPlaceholder?: string;
+  DropdownHeaderComponent?: ComponentType<any> | null;
+  DropDownRenderComponent?: ComponentType<any>;
+  DropDownLineItemRenderComponent?: ComponentType<any>;
+  CustomChickletComponent?: ComponentType<any>;
 };
 
 const ItemSelector: FunctionComponent<ItemSelectorProps>;
-export const preventCloseSelector: string;
 export default ItemSelector;