Filter

Отображает конструктор фильтров

Используется для создания фильтров на основе множества правил. Входными данными компонента является массив объектов Columns. Каждый объект содержит поля для фильтрации, которые могут иметь следующие типы dataType:

string;
number;
date;
boolean;
dictionary.

При фильтрации к каждому полю в зависимости от его типа могут быть применимы следующие операции allowedOperators:

string: "Contains", "NotContain", "Equals", "NotEqual", "BeginWith", "EndsOn", "Filled", "NotFilled", "Matches".
number: "Equals", "NotEqual", "LessThan", "MoreThan", "LessThanOrEqual", "GreaterThanOrEqual", "Between", "Filled", "NotFilled".
date: "Between", "LessThan", "MoreThan", "Filled", "NotFilled".
boolean и dictionary: "Equals", "NotEqual", "Filled", "NotFilled".

Компонент может иметь предустановленные фильтры PresetFilters, не доступные для редактирования.

Свойства

Badge

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. 
// Число после символа "-" (в этом примере представлено числом 4) должно быть кратно величине,
// указанной в параметре, определяющем кратность отступов, 
// в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

Columns

Поля данных для фильтрации. В качестве значения может использоваться массив объектов со следующими полями:

title: заголовок поля;
alias: уникальный идентификатор поля;
allowedOperators: список операций, доступных для поля. В зависимости от типа поля могут использоваться следующие операции:
- string: "Contains", "NotContain", "Equals", "NotEqual", "BeginWith", "EndsOn", "Filled", "NotFilled", "Matches".
- number: "Equals", "NotEqual", "LessThan", "MoreThan", "LessThanOrEqual", "GreaterThanOrEqual", "Between", "Filled", "NotFilled".
- date: "Between", "LessThan", "MoreThan", "Filled", "NotFilled".
- boolean и dictionary: "Equals", "NotEqual", "Filled", "NotFilled".
dataType: тип данных поля. Допустимы следующие значения: string, number, date, boolean, dictionary. Для типа dictionary необходимо указать value в формате {[key]: [value]}. В качестве value внутри filters устанавливается ключ нужного поля.
dateFormat: формат хранения даты для типа date. Допустимые значения перечислены в библиотеке moment.js. Если dateFormat не указан, по умолчанию используется формат ISO 8601.

Тип: array

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

CustomFilters

Массив настраиваемых фильтров.

Тип: array

EnabledFilter

Фильтр, используемый при отображении области с компонентом Filter на странице приложения. Если значение не задано, открывается вкладка компонента Accordion с предустановленными фильтрами.

Тип: object

Fields

Поля данных для фильтрации. Устаревшее свойство, используется только для совместимости с версиями Атомкод 3.2 и более ранними.

Тип: array

Hidden

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

Тип: boolean

Hint

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне.

Тип: any

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

MaxCountOfFilters

Максимальное количество правил фильтра в группе. Значение 0 используется для отключения этого ограничения.

Тип: number

MaxLevelOfGroup

Максимальный уровень вложенности правил фильтра.

Тип: number

Значение по умолчанию: 3

Model

Псевдоним свойств EnabledFilter и OutputEnabledFilter.

Тип: array

OnChangeCustomFilters

Обработчик события об изменении customFilters, возвращающий объект со списком всех настраиваемых фильтров и последним измененным: { filters: IFilterItem[], lastFilter: IFilterItem}.

Тип: any

OnClick

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}  

Тип: undefined

OnFilterSet

Обработчик события применения фильтров, возвращающий объект со списком всех фильтров.

Тип: any

OnKeyDown

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

OptionalOpen

Признак открытия фильтра.

Тип: boolean

OutputCustomFilters

Привязка свойства customFilters отрисованного компонента к модели.

Тип: any

OutputEnabledFilter

Привязка отрисованного включенного фильтра к модели (выходное значение).

Тип: any

OutputPresetFilters

Привязка свойства presetFilters отрисованного компонента к модели

Тип: any

PresetFilters

Предустановленные фильтры, которые не доступны пользователю для редактирования.

Тип: array

ShowButton

Признак отображения кнопки открытия диалога настройки фильтра: true — кнопка отображается; false — кнопка не отображается.

Тип: boolean

Значение по умолчанию: True

Slot

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Title

Заголовок диалога настройки фильтра.

Тип: string

Значение по умолчанию: Filter title

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода при изменении состояния компонента.

Тип: string

Visible

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

Тип: boolean

Значение по умолчанию: True

Примеры

JSX:

<Group Mode={"Column"} >
  <Group VerticalAlign="Center" Height="60px">
    <Filter 
      MaxLevelOfGroup={7}
      Columns={[ 
        {alias: 'ProductName', title: 'Название продукта', allowedOperators : ['Contains'], dataType: 'string'},
        {alias: 'ProductCompany', title: 'Компания', dataType: 'dictionary',
          value: {
            "FriendsCoKEY": "FriendsCo",
            "MyCompanyKEY" : "MyCompany",
            "YourCompanyKEY" : "YourCompany",
          },
        },
        {alias: 'Discounted', title: 'Со скидкой', dataType: 'boolean'},
        {alias: 'UnitPrice', title: 'Цена', dataType: 'number'},
        {alias: 'Date', title: 'Дата', dataType: 'date'},
      ]}
      PresetFilters={[{ 
        name: 'First system filter (example of system filter)',
        id: '1',
        enabled: false,
        filterType: 'System',
        filter: {
          "logic": "And",
          "name": "parent",
          "filters": [
            {
              "logic": "And",
              "fieldAlias": "Date",
              "operator": "Equals",
              "value": "2023-08-30T20:00:00.000Z",
              "valid": true,
              "valueEnd": ""
            },
            {
              "logic": "And",
              "name": "Группа 1",
              "filters": [
                {
                  "logic": "And",
                  "fieldAlias": "ProductCompany",
                  "operator": "Equals",
                  "value": "FriendsCoKEY",
                  "valid": true,
                  "valueEnd": ""
                },
                {
                  "logic": "And",
                  "fieldAlias": "ProductCompany",
                  "operator": "Equals",
                  "value": "MyCompanyKEY",
                  "valid": true,
                  "valueEnd": ""
                },
                {
                  "logic": "And",
                  "name": "Группа 1.1",
                  "filters": [
                    {
                      "logic": "Or",
                      "fieldAlias": "UnitPrice",
                      "operator": "Equals",
                      "value": "5",
                      "valid": true,
                      "valueEnd": ""
                    },
                    {
                      "logic": "Or",
                      "fieldAlias": "UnitPrice",
                      "operator": "Equals",
                      "value": "10",
                      "valid": true,
                      "valueEnd": ""
                    }
                  ],
                  "valid": true
                },
                {
                  "logic": "And",
                  "name": "Группа 1.2",
                  "filters": [
                    {
                      "logic": "Or",
                      "fieldAlias": "ProductName",
                      "operator": "Contains",
                      "value": "organic11",
                      "valid": true
                    },
                    {
                      "logic": "Or",
                      "fieldAlias": "ProductName",
                      "operator": "Contains",
                      "value": "cranberry22",
                      "valid": true
                    }
                  ],
                  "valid": true
                }
              ],
              "valid": true
            },
            {
              "logic": "And",
              "fieldAlias": "Discounted",
              "operator": "Equals",
              "value": true,
              "valueEnd": "",
              "valid": true
            }
          ]
      }}]}
      CustomFilters-var="customFilters"
      OutputCustomFilters-var="customFilters" 
      OnChangeCustomFilters={() => {
        console.log(getEvent());
      }}
      Model-var="enabledFilter"
    />
    <Text CSS={['pl-8']} Mode="Regular_14" Value="С предустановленными фильтрами" />
  </Group>
  <Group VerticalAlign="Center" Height="60px">
    <Filter 
      Columns={[ 
        {alias: 'ProductName', title: 'Название продукта', dataType: 'string'}
      ]}
    />
    <Text CSS={['pl-8']} Mode="Regular_14" Value="Без предустановленных фильтров" />
  </Group>
</Group>

Свойства​

Badge​

CSS​

Columns​

CombineConfig​

CustomFilters​

EnabledFilter​

Fields​

Hidden​

Hint​

Id​

MaxCountOfFilters​

MaxLevelOfGroup​

Model​

OnChangeCustomFilters​

OnClick​

OnFilterSet​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

OptionalOpen​

OutputCustomFilters​

OutputEnabledFilter​

OutputPresetFilters​

PresetFilters​

ShowButton​

Slot​

Title​

Tooltip​

TraceId​

Visible​

Примеры​

Свойства

Badge

CSS

Columns

CombineConfig

CustomFilters

EnabledFilter

Fields

Hidden

Hint

Id

MaxCountOfFilters

MaxLevelOfGroup

Model

OnChangeCustomFilters

OnClick

OnFilterSet

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

OptionalOpen

OutputCustomFilters

OutputEnabledFilter

OutputPresetFilters

PresetFilters

ShowButton

Slot

Title

Tooltip

TraceId

Visible

Примеры