forstok-ui-lib 5.6.11 → 5.7.0

package/src/components/date/daterange.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import moment from 'moment';
+import DateRangePicker from '@wojtekmaj/react-daterange-picker';
+import { configDateRange } from '../../maps';
+import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
+import 'react-calendar/dist/Calendar.css';
+import './daterangepicker.css';
+import { DateRangeWrapper } from './styles';
+import { TValueDateRange } from './typed';
+
+type TDateRangeComponent = {
+  $mode?: string;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  evChange: (value: TValueDateRange) => void;
+  portalId?: string;
+}
+
+const DateRangeComponent = ({ $mode, startDate, endDate, evChange, portalId }: TDateRangeComponent) => {
+  const _startDate: Date | null = startDate || moment(configDateRange.startDate, 'YYYY-MM-DD').toDate();
+  const _endDate: Date | null = endDate || moment(configDateRange.endDate, 'YYYY-MM-DD').toDate();
+  const minDate = moment(configDateRange.minDate, 'YYYY-MM-DD').toDate();
+  const maxDate = moment().toDate();
+
+  const [value, setValue] = useState<TValueDateRange>([_startDate, _endDate]);
+
+  const onChange = (value: TValueDateRange) => {
+    setValue(value);
+    evChange && evChange(value);
+  }
+
+  return (
+    <DateRangeWrapper $mode={$mode}>
+      <DateRangePicker 
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={onChange} 
+        value={value}
+        clearIcon={null}
+        {...portalId && { portalContainer: document.getElementById(portalId) }} />
+    </DateRangeWrapper>
+  );
+}
+
+export default DateRangeComponent;

package/src/components/date/daterangepicker.css

@@ -0,0 +1,100 @@
+.react-daterange-picker {
+  font-family: var(--pri-ft-fm);
+  font-size: var(--pri-ft-sz);
+  color: var(--pri-clr);
+  background-color: var(--ter-clr-bg);
+  align-items: center;
+  border: 0;
+  border-radius: var(--sec-rd);
+  font-weight: 400;
+  height: 30px;
+  padding: 0 26px 0 16px;
+  position: relative;
+  width: 100%;
+}
+.react-daterange-picker__wrapper {
+  border: 0;
+  width: 100%;
+  justify-content: left;
+  display: inline-grid;
+  grid-auto-flow: column;
+}
+.react-calendar {
+  background-color: var(--pri-clr-bg);
+  border: 1px solid var(--sec-clr-ln);
+  box-shadow: var(--sec-shd-bx);
+  border-radius: var(--sec-rd);
+  border: 1px solid #a0a096;
+  font-family: var(--pri-ft-fm);
+  font-size: var(--pri-ft-sz);
+  color: var(--pri-clr);
+  line-height: 1.125em;
+  padding: 10px 15px;
+}
+.react-calendar__navigation__label__labelText {
+  color: #000;
+  font-size: 1em;
+  font-weight: 700;
+  height: 35px;
+  line-height: 35px;
+  position: relative;
+  text-align: center;
+}
+.react-calendar__tile {
+  font-size: 1em;
+  line-height: 1;
+  border-radius: 0;
+}
+.react-calendar__tile--now {
+  border-radius: 10px !important;
+}
+.react-calendar__tile--now.react-calendar__tile--active {
+  border-radius: 0 !important;
+}
+.react-calendar__tile--now.react-calendar__tile--rangeEnd.react-calendar__tile--active {
+  border-radius: 0 10px 10px 0 !important;
+}
+.react-calendar__tile--hover {
+  border-radius: 0;
+}
+.react-calendar__tile--active {
+  background-color: #fc5c64;
+  border: 1px solid #ec5b62;
+}
+.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus {
+  background-color: #fc5c64;
+  border: 1px solid #ec5b62;
+}
+.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
+  border-radius: 10px !important;
+}
+.react-calendar__tile--now.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--active {
+  border-radius: 10px !important;
+}
+
+
+.react-calendar__tile--rangeStart, .react-calendar__tile--hoverStart {
+  border-radius: 10px 0px 0 10px !important;
+}
+.react-calendar__tile--rangeEnd, .react-calendar__tile--hoverEnd {
+  border-radius: 0 10px 10px 0 !important;
+}
+
+
+.react-calendar__month-view__days {
+  gap: 1px 0;
+}
+.react-calendar__month-view__weekdays {
+  font-size: 1em;
+}
+.react-calendar__navigation__arrow {
+  font-size: 1.5em;
+}
+.react-daterange-picker__calendar {
+  z-index: 100;
+}
+.react-daterange-picker__button {
+  position: absolute;
+  right: 0;
+}
+  

package/src/components/date/{styles.ts → styles.tsx}

@@ -398,4 +398,19 @@ export const DateRangePortalContainer = styled.div`
 export const DateRangeIconContainer = styled.div`
   display: flex;
   padding: 0 0 0 12px;
-`
+`
+export const DateRangeWrapper = styled.div<{ $mode?: string }>`
+  position: relative;
+  ${({ $mode }: { $mode?: string }) => $mode === 'input' && css`
+    border: 1px solid var(--ck-clr-ln);
+    cursor: pointer;
+    height: 30px;
+    border-radius: var(--ter-rd);
+    background-color: rgb(255, 255, 255);
+    padding: 0px 2px 0px 8px;
+    .react-daterange-picker {
+      background-color: transparent;
+      padding: 0px;
+    }
+  `}
+`;

package/src/components/date/typed.ts

@@ -0,0 +1,3 @@
+type ValuePiece = Date | null;
+
+export type TValueDateRange = ValuePiece | [ValuePiece, ValuePiece];

package/src/assets/images/icons/filter copy.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="auto" height="auto" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <title>filter-horizontal-solid</title>
-  <g id="Layer_2" data-name="Layer 2">
-    <g id="invisible_box" data-name="invisible box">
-      <rect width="48" height="48" fill="none"/>
-    </g>
-    <g id="icons_Q2" data-name="icons Q2">
-      <path d="M41.8,8H21.7A6.2,6.2,0,0,0,16,4a6,6,0,0,0-5.6,4H6.2A2.1,2.1,0,0,0,4,10a2.1,2.1,0,0,0,2.2,2h4.2A6,6,0,0,0,16,16a6.2,6.2,0,0,0,5.7-4H41.8A2.1,2.1,0,0,0,44,10,2.1,2.1,0,0,0,41.8,8Z"/>
-      <path d="M41.8,22H37.7A6.2,6.2,0,0,0,32,18a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4H26.4A6,6,0,0,0,32,30a6.2,6.2,0,0,0,5.7-4h4.1a2,2,0,1,0,0-4Z"/>
-      <path d="M41.8,36H24.7A6.2,6.2,0,0,0,19,32a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4h7.2A6,6,0,0,0,19,44a6.2,6.2,0,0,0,5.7-4H41.8a2,2,0,1,0,0-4Z"/>
-    </g>
-  </g>
-</svg>