How to use lodash-decorators - 10 common examples

}

const person4 = new Person4('Joe', 'Smith') as Person4Ex;

person4.logName(); // joe-smith

//
// Instance Decorators
//

class Person5 {
    @curry(2) // <= prototype decorator
    @debounce(100) // <= instance decorator
    getName() { } // => Throws an error. (╯°□°）╯︵ ┻━┻

    @debounce(100) // <= instance decorator
    @curry(2) // <= prototype decorator
    getName2() { } // => All is well :)
}

//
// Getters and Setters
//

import { once, flow } from 'lodash-decorators';

function alwaysArray(value: string | string[]): string[] {
    return Array.isArray(value) ? value : _.isUndefined(value) ? [] : [value];
}

class Person6 {
    constructor() { }

export class AgGrid extends React.Component {
    gridApi: GridApi;
    // 表格容器
    refTableBody = React.createRef();
    // 事件对象
    resizeEvent: Subscription;
    minHeight = 400;
    state = {
        sortable: true,
        height: this.minHeight
    }
    /**
     * 修改 高度
     * @param refFullscreen
     */
    @Debounce(200)
    onUpdateHeight(refFullscreen = false) {
        try {
            // props 中传递了 height
            if (this.props.style && this.props.style.height) {
                return
            }
            const refTable = this.refTableBody.current;//ReactDOM.findDOMNode(this.ref.current) as HTMLDivElement;
            // 60 是头部 标题栏 高度
            let height = window.innerHeight - refTable.offsetTop - 60 - 100;
            if (!globalConfig.tabsPage) {
                height += 90;
            }
            height = height < this.minHeight ? this.minHeight : height;
            if (this.state.height !== height) {
                this.gridApi.sizeColumnsToFit();
                this.setState({ height });

onAddingNewItemHandler(editedItem?: IWordProtectionBlackListItem, index: number = -1) {
    if (editedItem) {
      this.newListItem = editedItem;
    }
    this.editIndex = index;
    this.$modal.show(NEW_WORD_PROTECTION_LIST_MODAL_ID);
  }

  onDeleteAliasHandler(index: number) {
    const newListItemArray = this.value.slice(0);
    newListItemArray.splice(index, 1);
    this.$emit('input', newListItemArray);
  }

  @Watch('errors.items.length')
  @debounce(200)
  async onErrorsChanged() {
    await this.$refs.form.validateAndGetErrorsCount();
  }

  async onAddNewItemHandler() {
    if (await this.$refs.form.validateAndGetErrorsCount()) return;

    const newListItemArray = this.value.slice(0);

    if (this.editIndex > -1) {
      // editing existing item
      newListItemArray.splice(this.editIndex, 1, this.newListItem);
    } else {
      newListItemArray.push(this.newListItem);
    }
    this.$emit('input', newListItemArray);

tableDom: HTMLDivElement;
    // clientWidth = 0;
    /**
     * 初始化列参数配置
     */
    @action.bound
    initColumns() {
        this.columns = this.onGetColumns(TableUtils.onSetColumnsWidth(this.tableDom, this.OriginalColumns));
    }
    /**
     * 分页、排序、筛选变化时触发
     * @param page 
     * @param filters 
     * @param sorter 
     */
    @Debounce(300)
    onChange(page, filters, sorter) {
        if (this.isResize) {
            return console.log("拖拽中")
        }
        let sort: any = "";
        if (sorter.columnKey) {
            if (sorter.order == 'descend') {
                sort = { Direction: "Desc", Property: sorter.columnKey }
                // sort = `${sorter.columnKey} desc`
            } else {
                sort = { Direction: "Asc", Property: sorter.columnKey }
                // sort = `${sorter.columnKey} asc`
            }
        }
        this.Store.onSearch({
            SortInfo: sort,

placeholder: '!example',
  };

  get isDuplicate() {
    // remove "!" and check the rest
    const existingWithoutPrefix = this.value.map(alias => alias.replace('!', ''));
    const newWithoutPrefix = this.newAlias.replace('!', '');
    return (
      existingWithoutPrefix.length > 0 &&
      newWithoutPrefix &&
      existingWithoutPrefix.indexOf(newWithoutPrefix) > -1
    );
  }

  @Watch('newAlias', { immediate: true, deep: true })
  @debounce(1)
  onCommandChanged(value: string, oldValue: string) {
    if (oldValue) {
      this.newAlias = value.replace(/ +/g, '');
    }
  }

  onAddAliasHandler() {
    if (!this.newAlias) return;
    if (this.isDuplicate) return;

    const newAliasArray = this.value.slice(0);
    newAliasArray.push(this.formatAlias(this.newAlias));
    this.$emit('input', newAliasArray);
    this.newAlias = '';
  }

if (this.isEdit) {
      this.newCommand = cloneDeep(this.customCommandToUpdate);
      this.newCommand.permission.level = this.customCommandToUpdate.permission.level;
    }
  }

  get isEdit() {
    return this.customCommandToUpdate && this.customCommandToUpdate.id;
  }

  get customCommandToUpdate() {
    return this.chatbotApiService.Common.state.customCommandToUpdate;
  }

  @Watch('newCommand', { immediate: true, deep: true })
  @debounce(1)
  onCommandChanged(value: ICustomCommand, oldValue: ICustomCommand) {
    if (oldValue) {
      this.newCommand.command = value.command.replace(/ +/g, '');
    }
  }

  // metadata
  commandMetadata: ITextMetadata = {
    required: true,
    type: EInputType.text,
    title: $t('Command'),
    placeholder: $t('Enter the text string which will trigger the response'),
    tooltip: $t('Enter a word used to trigger a response'),
    min: 2,
    max: 25,
    uuid: $t('Command'),

// if editing existing custom command
    if (this.isEdit) {
      this.newTimer = cloneDeep(this.timerToUpdate);
    }
  }

  get isEdit() {
    return this.timerToUpdate && this.timerToUpdate.id;
  }

  get timerToUpdate() {
    return this.chatbotApiService.Common.state.timerToUpdate;
  }

  @Watch('newTimer', { immediate: true, deep: true })
  @debounce(1)
  onCommandChanged(value: IChatbotTimer, oldValue: IChatbotTimer) {
    if (oldValue) {
      this.newTimer.name = value.name.replace(/ +/g, '');
      this.newTimer.message = value.message.replace(/(\r\n|\r|\n)/g, '');
    }
  }

  @Watch('errors.items.length')
  @debounce(200)
  async onErrorsChanged() {
    await this.$refs.form.validateAndGetErrorsCount();
  }

  async onSaveHandler() {
    if (await this.$refs.form.validateAndGetErrorsCount()) return;

@observer
class TreeInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || [],
    };
  }

  componentWillReceiveProps({ value }) {
    this.setState({
      value: value || [],
    });
  }

  @debounce(50)
  handleChangeDebounced() {
    // console.log('handleChangeDebounced');
    const { onChange } = this.props;
    if (onChange) onChange(this.state.value);
  }

  @autobind
  handleSetStateWithDebouncedCallback(value) {
    this.setState({ value: uniq(value) }, () => {
      this.handleChangeDebounced();
    });
  }

  @autobind
  handleCheck(value) {
    const { flat = false } = this.props;

@observer
class TreeInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || [],
    };
  }

  componentWillReceiveProps({ value }) {
    this.setState({
      value: value || [],
    });
  }

  @debounce(50)
  handleChangeDebounced() {
    // console.log('handleChangeDebounced');
    const { onChange } = this.props;
    if (onChange) onChange(this.state.value);
  }

  @autobind
  handleChange(value) {
    const { flat = false } = this.props;
    // чистим от категорий игр
    if (!flat) {
      value = value.filter(id => id.charAt(0) !== '@');
    }
    value = uniq(value);

    // console.log('handleChange');

categories: null,
      },
      () => {
        if (query.length >= MIN_SEARCH_LENGTH) {
          this.query$.next(query.trim());
        } else if (!shouldKeepWarningVisible) {
          this.considerMinLengthWarning();
        }
      },
    );
  };

  // Rather than add a jarring warning message as someone is typing a query —
  // for which a warning might not even be necessary — we wait until typing has finished
  // to determine whether a warning will be useful.
  @Debounce(300)
  private considerMinLengthWarning() {
    const { query } = this.state;
    this.setState({ showMinLengthWarning: !!query && query.length < MIN_SEARCH_LENGTH });
  }

  private showDropdown = () => {
    this.setState({ showDropdown: true });
  };

  private hideDropdown = () => {
    this.setState({ showDropdown: false });
  };

  private clearFilters = (result: ISearchResult) => {
    ClusterState.filterService.overrideFiltersForUrl(result);
  };