Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add daterange component #305

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add daterange component #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed33056
add daterange component
Sep 6, 2021
6ffcb1c
Merge branch 'master' of https://github.com/day8/re-com
Sep 6, 2021
58fbb17
add :initial-display to datepicker
RT567 Sep 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions run/resources/public/assets/css/re-com.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,6 +745,120 @@ fieldset[disabled] .btn {
background-color: #F7F7F7
}

/*daterange*/

.rc-daterange-td-basic {
padding: 5px;
width: 30px;
text-align: center;
color: #2c2d2ecb;
white-space: nowrap;
font-weight: normal;
}

.daterange-default-td:hover {
cursor: pointer;
background: #357ebd;
color: #FFF;
/*background-color: #889afd3b*/
}

.daterange-week {
font-size: 80%;
width: 14px;
text-align: left;
color: #ccc
}

.daterange-interval-td {
background-color: #b0d2ffb4;
}

.daterange-interval-td:hover {
cursor: pointer;
background: #357ebd;
color: #FFF;
/*background-color: #50b4db*/
}

.daterange-start-td {
cursor: pointer;
background-color: #3ab0ffbd;
border-radius: 5px 0px 0px 5px;
}

.daterange-end-td {
cursor: pointer;
background-color: #3ab0ffbd;
border-radius: 0px 5px 5px 0px;
}

.daterange-start-td:hover, .daterange-end-td:hover {
cursor: pointer;
color: white;
background-color: #357ebd;
}

.daterange-temp-td {
background-color: #889afd3b;
}

.daterange-temp-td:hover {
background-color: #357ebd;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
color: white;
}

.rc-daterange-nav-icon {
height: 24px;
width: 24px;
}

.rc-daterange-nav-button:hover {
background-color: #357ebd;
cursor: pointer;
color: white;
}

.rc-daterange-nav-button path {
fill: #357ebd;
}

.rc-daterange-nav-button:hover path {
fill: #FFF
}

.daterange-day-title {
text-align: center;
font-weight: 500;
padding: 4px;
}

.daterange-disabled-td {
opacity: 0.4;
}

.daterange-today {
background-color: #ffd413;
border-radius: 100px;
}

.daterange-today:hover {
cursor: pointer;
color: white;
background-color: #9e8100;
}

.rc-daterange-month-title {
font-size: 17px;
font-weight: 700;
}

.rc-daterange-year-title {
font-weight: 630;
}

/*----------------------------------------------------------------------------------------
END OF DATE PICKER SECTION...

Expand Down
81 changes: 41 additions & 40 deletions src/re_com/datepicker.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,7 @@
[{:name :model :required false :type "satisfies DateTimeProtocol | r/atom" :validate-fn date-like? :description [:span "the selected date. If provided, should pass pred " [:code ":selectable-fn"] ". If not provided, (now->utc) will be used and the returned date will be a " [:code "goog.date.UtcDateTime"]]}
{:name :on-change :required true :type "satisfies DateTimeProtocol -> nil" :validate-fn fn? :description [:span "called when a new selection is made. Returned type is the same as model (unless model is nil, in which case it will be " [:code "goog.date.UtcDateTime"] ")"]}
{:name :disabled? :required false :default false :type "boolean | atom" :description "when true, the user can't select dates but can navigate"}
{:name :initial-display :required false :type "satisfies DateTimeProtocol | r/atom" :validate-fn date-like? :description "set the months shown when no model is selected, defaults to the current month"}
{:name :selectable-fn :required false :default "(fn [date] true)" :type "function" :validate-fn fn? :description "This predicate function is called with one argument, the date. If it answers false, day will be shown disabled and can't be selected."}
{:name :show-weeks? :required false :default false :type "boolean" :description "when true, week numbers are shown to the left"}
{:name :show-today? :required false :default false :type "boolean" :description "when true, today's date is highlighted"}
Expand All @@ -528,12 +529,12 @@
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))

(defn datepicker
[& {:keys [model] :as args}]
[& {:keys [model initial-display] :as args}]
(or
(validate-args-macro datepicker-args-desc args)
(let [external-model (reagent/atom (deref-or-value model)) ;; Set model type in stone on creation of this datepicker instance
internal-model (reagent/atom @external-model) ;; Holds the last known external value of model, to detect external model changes
display-month (reagent/atom (cljs-time/first-day-of-the-month (or @internal-model (now->utc))))]
display-month (reagent/atom (cljs-time/first-day-of-the-month (or @internal-model initial-display (now->utc))))]
(fn datepicker-render
[& {:keys [model on-change disabled? start-of-week hide-border? class style attr parts src debug-as]
:or {start-of-week 6} ;; Default to Sunday
Expand All @@ -547,7 +548,7 @@
(when (not= @external-model latest-ext-model) ;; Has model changed externally?
(reset! external-model latest-ext-model)
(reset! internal-model latest-ext-model)
(reset! display-month (cljs-time/first-day-of-the-month (or @internal-model (now->utc)))))
(reset! display-month (cljs-time/first-day-of-the-month (or @internal-model initial-display (now->utc)))))
[main-div-with
[:table
(merge
Expand Down Expand Up @@ -602,40 +603,40 @@
(defn datepicker-dropdown
[& {:keys [src] :as args}]
(or
(validate-args-macro datepicker-dropdown-args-desc args)
(let [shown? (reagent/atom false)
cancel-popover #(reset! shown? false)
position :below-left]
(fn datepicker-dropdown-render
[& {:keys [model show-weeks? on-change format goog? no-clip? placeholder width disabled? position-offset src debug-as]
:or {no-clip? true, position-offset 0}
:as passthrough-args}]
(or
(validate-args-macro datepicker-dropdown-args-desc passthrough-args)
(let [collapse-on-select (fn [new-model]
(reset! shown? false)
(when on-change (on-change new-model))) ;; wrap callback to collapse popover
passthrough-args (-> passthrough-args
(dissoc :format :goog? :no-clip? :placeholder :width :position-offset) ;; these keys only valid at this API level
(assoc :on-change collapse-on-select)
(assoc :src (at))
(merge {:hide-border? true}) ;; apply defaults
vec
flatten)]
[popover-anchor-wrapper
:src src
:debug-as (or debug-as (reflect-current-component))
:class "rc-datepicker-dropdown-wrapper"
:showing? shown?
:position position
:anchor [anchor-button shown? model format goog? placeholder width disabled?]
:popover [popover-content-wrapper
:src (at)
:position-offset (+ (if show-weeks? 43 44) position-offset)
:no-clip? no-clip?
:arrow-length 0
:arrow-width 0
:arrow-gap 3
:padding "0px"
:on-cancel cancel-popover
:body (into [datepicker] passthrough-args)]]))))))
(validate-args-macro datepicker-dropdown-args-desc args)
(let [shown? (reagent/atom false)
cancel-popover #(reset! shown? false)
position :below-left]
(fn datepicker-dropdown-render
[& {:keys [model show-weeks? on-change format goog? no-clip? placeholder width disabled? position-offset src debug-as]
:or {no-clip? true, position-offset 0}
:as passthrough-args}]
(or
(validate-args-macro datepicker-dropdown-args-desc passthrough-args)
(let [collapse-on-select (fn [new-model]
(reset! shown? false)
(when on-change (on-change new-model))) ;; wrap callback to collapse popover
passthrough-args (-> passthrough-args
(dissoc :format :goog? :no-clip? :placeholder :width :position-offset) ;; these keys only valid at this API level
(assoc :on-change collapse-on-select)
(assoc :src (at))
(merge {:hide-border? true}) ;; apply defaults
vec
flatten)]
[popover-anchor-wrapper
:src src
:debug-as (or debug-as (reflect-current-component))
:class "rc-datepicker-dropdown-wrapper"
:showing? shown?
:position position
:anchor [anchor-button shown? model format goog? placeholder width disabled?]
:popover [popover-content-wrapper
:src (at)
:position-offset (+ (if show-weeks? 43 44) position-offset)
:no-clip? no-clip?
:arrow-length 0
:arrow-width 0
:arrow-gap 3
:padding "0px"
:on-cancel cancel-popover
:body (into [datepicker] passthrough-args)]]))))))
Loading