LightcordApi DateInput and DateRange
This commit is contained in:
parent
5c05c3778c
commit
85e4a7936a
24872
LightcordApi/js/main.js
24872
LightcordApi/js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,5 @@
|
||||||
|
/*!
|
||||||
|
Copyright (c) 2017 Jed Watson.
|
||||||
|
Licensed under the MIT License (MIT), see
|
||||||
|
http://jedwatson.github.io/classnames
|
||||||
|
*/
|
|
@ -19,10 +19,15 @@
|
||||||
"@babel/preset-react": "^7.0.0",
|
"@babel/preset-react": "^7.0.0",
|
||||||
"@babel/register": "^7.0.0",
|
"@babel/register": "^7.0.0",
|
||||||
"@types/bandagedbd__bdapi": "^0.2.2",
|
"@types/bandagedbd__bdapi": "^0.2.2",
|
||||||
|
"@types/moment": "^2.13.0",
|
||||||
"@types/react": "^16.9.36",
|
"@types/react": "^16.9.36",
|
||||||
|
"@types/react-datepicker": "^3.1.1",
|
||||||
"@types/react-dom": "^16.9.8",
|
"@types/react-dom": "^16.9.8",
|
||||||
"@types/uuid": "^8.0.0",
|
"@types/uuid": "^8.0.0",
|
||||||
"babel-loader": "^8.0.6",
|
"babel-loader": "^8.0.6",
|
||||||
|
"date-fns": "^2.15.0",
|
||||||
|
"emotion": "^10.0.27",
|
||||||
|
"react-datepicker": "^3.1.3",
|
||||||
"terser-webpack-plugin": "^3.0.6",
|
"terser-webpack-plugin": "^3.0.6",
|
||||||
"ts-loader": "^7.0.5",
|
"ts-loader": "^7.0.5",
|
||||||
"typedoc": "^0.17.8",
|
"typedoc": "^0.17.8",
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import { ReactDOMSelector } from "./selectors"
|
|
||||||
|
|
||||||
// bait typescript into thinking this is not reactDOM so no circular dependency.
|
// bait typescript into thinking this is not reactDOM so no circular dependency.
|
||||||
window.ReactDOM = (window["Reac"+"tDOM"] || // If in Lightcord
|
window.ReactDOM = (window["Reac"+"tDOM"] || // If in Lightcord
|
||||||
(()=>{ // If in Standard BetterDiscord
|
(()=>{ // If in Standard BetterDiscord
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import { ReactSelector } from "./selectors";
|
|
||||||
|
|
||||||
window.React = (window.React || // If in Lightcord
|
window.React = (window.React || // If in Lightcord
|
||||||
(()=>{ // If in Standard BetterDiscord
|
(()=>{ // If in Standard BetterDiscord
|
||||||
try{
|
try{
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
export const ReactSelector = mod => !["Component", "PureComponent", "Children", "createElement", "cloneElement"].find(k => !mod[k])
|
|
||||||
export const ReactDOMSelector = mod => mod.findDOMNode
|
|
|
@ -30,8 +30,8 @@ export default cloneNullProto({
|
||||||
TextInput: createProxyErrorCatcherClass(TextInput),
|
TextInput: createProxyErrorCatcherClass(TextInput),
|
||||||
Dropdown: createProxyErrorCatcherClass(Dropdown),
|
Dropdown: createProxyErrorCatcherClass(Dropdown),
|
||||||
ColorPicker: createProxyErrorCatcherClass(ColorPicker),
|
ColorPicker: createProxyErrorCatcherClass(ColorPicker),
|
||||||
//DateRange: createProxyErrorCatcherClass(DateRange),
|
DateRange: createProxyErrorCatcherClass(DateRange),
|
||||||
//DateInput: createProxyErrorCatcherClass(DateInput)
|
DateInput: createProxyErrorCatcherClass(DateInput)
|
||||||
}),
|
}),
|
||||||
general: cloneNullProto({
|
general: cloneNullProto({
|
||||||
Title: createProxyErrorCatcherClass(Title),
|
Title: createProxyErrorCatcherClass(Title),
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import WebpackLoader from "../../modules/WebpackLoader"
|
import WebpackLoader from "../../modules/WebpackLoader"
|
||||||
import { ReactNode, CSSProperties } from "react"
|
import { ReactNode, CSSProperties, MouseEventHandler, MouseEvent } from "react"
|
||||||
import NOOP from "../../modules/noop"
|
import NOOP from "../../modules/noop"
|
||||||
|
|
||||||
let ButtonModules
|
let ButtonModules
|
||||||
|
|
||||||
type ButtonProps = {
|
type ButtonProps = {
|
||||||
children?: ReactNode,
|
children?: ReactNode,
|
||||||
onClick?: () => void,
|
onClick?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void,
|
||||||
color?: ButtonColor,
|
color?: ButtonColor,
|
||||||
wrapper?: boolean,
|
wrapper?: boolean,
|
||||||
look?: ButtonLook,
|
look?: ButtonLook,
|
||||||
|
@ -14,7 +14,9 @@ type ButtonProps = {
|
||||||
hoverColor?: ButtonHovers,
|
hoverColor?: ButtonHovers,
|
||||||
disabled?: boolean,
|
disabled?: boolean,
|
||||||
style?: CSSProperties,
|
style?: CSSProperties,
|
||||||
onRightClick?: () => void
|
onRightClick?: () => void,
|
||||||
|
className?: string,
|
||||||
|
onMouseDown?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void
|
||||||
}
|
}
|
||||||
export default class Button extends React.Component<ButtonProps, {hover: boolean}> {
|
export default class Button extends React.Component<ButtonProps, {hover: boolean}> {
|
||||||
constructor(props:ButtonProps){
|
constructor(props:ButtonProps){
|
||||||
|
@ -58,6 +60,9 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
|
||||||
if("onClick" in this.props){
|
if("onClick" in this.props){
|
||||||
props.onClick = this.props.onClick
|
props.onClick = this.props.onClick
|
||||||
}
|
}
|
||||||
|
if("onMouseDown" in this.props){
|
||||||
|
props.onMouseDown = this.props.onMouseDown
|
||||||
|
}
|
||||||
if("wrapper" in this.props){
|
if("wrapper" in this.props){
|
||||||
props.wrapper = !!this.props.wrapper
|
props.wrapper = !!this.props.wrapper
|
||||||
}
|
}
|
||||||
|
@ -129,21 +134,28 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
|
||||||
let hoverColor = props.hoverColor ? colorsModule.ButtonHovers[props.hoverColor.toUpperCase()] || "" : ""
|
let hoverColor = props.hoverColor ? colorsModule.ButtonHovers[props.hoverColor.toUpperCase()] || "" : ""
|
||||||
if(hoverColor)hoverColor = " " + hoverColor
|
if(hoverColor)hoverColor = " " + hoverColor
|
||||||
|
|
||||||
props.onClick = typeof props.onClick === "function" ? props.onClick : () => {}
|
props.onClick = typeof props.onClick === "function" ? props.onClick : NOOP
|
||||||
if(typeof props.wrapper !== "boolean")props.wrapper = true
|
if(typeof props.wrapper !== "boolean")props.wrapper = true
|
||||||
|
|
||||||
|
props.onMouseDown = typeof props.onMouseDown === "function" ? props.onMouseDown : NOOP
|
||||||
|
|
||||||
let hover = this.state.hover ? euhModule1.hasHover : ""
|
let hover = this.state.hover ? euhModule1.hasHover : ""
|
||||||
if(hover)hover = " " + hover
|
if(hover)hover = " " + hover
|
||||||
|
|
||||||
|
let classListButton = `${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`.split(" ")
|
||||||
|
if(typeof this.props.className === "string" && this.props.className){
|
||||||
|
classListButton = this.props.className.split(" ").concat(classListButton)
|
||||||
|
}
|
||||||
let button = <button type="button"
|
let button = <button type="button"
|
||||||
ref="button" className={`${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`}
|
ref="button" className={classListButton.join(" ")}
|
||||||
style={{flex: "0 1 auto", ...props.style}} onClick={() => props.onClick()} onMouseEnter={(ev) => {
|
style={{flex: "0 1 auto", ...props.style}} onClick={props.onClick} onMouseEnter={(ev) => {
|
||||||
if(!hoverColor)return
|
if(!hoverColor)return
|
||||||
this.setState({hover: true})
|
this.setState({hover: true})
|
||||||
}} onMouseLeave={(ev) => {
|
}} onMouseLeave={(ev) => {
|
||||||
if(!hoverColor)return
|
if(!hoverColor)return
|
||||||
this.setState({hover: false})
|
this.setState({hover: false})
|
||||||
}} disabled={props.disabled} onContextMenu={() => props.onRightClick()}>
|
}} disabled={props.disabled} onContextMenu={() => props.onRightClick()}
|
||||||
|
onMouseDown={props.onMouseDown}>
|
||||||
<div className={euhModule1.contents}>{props.children}</div>
|
<div className={euhModule1.contents}>{props.children}</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { DateConstants } from "./DateRange"
|
import { DateConstants } from "./DateRange"
|
||||||
|
import WebpackLoader from "../../modules/WebpackLoader"
|
||||||
|
import { getInternalTextInput } from "./TextInput"
|
||||||
|
import Button from "./Button"
|
||||||
|
import ReactDOM = require("react-dom")
|
||||||
|
import * as DatePicker from "react-datepicker";
|
||||||
|
|
||||||
export type DateInputProps = {
|
export type DateInputProps = {
|
||||||
className?: string,
|
className?: string,
|
||||||
|
@ -11,17 +16,33 @@ export type DateInputProps = {
|
||||||
isModalInput?: boolean,
|
isModalInput?: boolean,
|
||||||
maxDate?: Date,
|
maxDate?: Date,
|
||||||
minDate?: Date,
|
minDate?: Date,
|
||||||
onChange?: () => void,
|
onChange?: (value:Date, name:string) => void,
|
||||||
selectsStart?: boolean,
|
selectsStart?: boolean,
|
||||||
showMonthYearPicker?: boolean,
|
showMonthYearPicker?: boolean,
|
||||||
startDate?: Date,
|
startDate?: Date,
|
||||||
endDate?: Date
|
endDate?: Date
|
||||||
style?: React.CSSProperties
|
style?: React.CSSProperties,
|
||||||
|
name: string,
|
||||||
|
selectsEnd?: boolean
|
||||||
}
|
}
|
||||||
export default class DateInput extends React.Component<DateInputProps> {
|
let _datefns
|
||||||
|
export function getDateFNS():typeof import("date-fns"){
|
||||||
|
return _datefns || (_datefns = require("date-fns"))
|
||||||
|
}
|
||||||
|
export function getEmotion():typeof import("emotion"){
|
||||||
|
return window["__SECRET_EMOTION__"]
|
||||||
|
}
|
||||||
|
let DateInputModules
|
||||||
|
export default class DateInput extends React.Component<DateInputProps, {
|
||||||
|
inputResetKey: number,
|
||||||
|
isCalendarPickerOpen: boolean,
|
||||||
|
calendarRight: number,
|
||||||
|
calendarTop: number,
|
||||||
|
value: Date
|
||||||
|
}> {
|
||||||
static defaultProps:Partial<DateInputProps> = {
|
static defaultProps:Partial<DateInputProps> = {
|
||||||
dateFormat: DateConstants.DATE_FORMAT,
|
dateFormat: DateConstants.DATE_FORMAT,
|
||||||
isModalInput: false
|
isModalInput: true
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props:DateInputProps){
|
constructor(props:DateInputProps){
|
||||||
|
@ -35,12 +56,299 @@ export default class DateInput extends React.Component<DateInputProps> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get modules(){
|
||||||
|
return DateInputModules || (DateInputModules = [
|
||||||
|
WebpackLoader.find(e => e.default && e.default.displayName === "Clickable"),
|
||||||
|
WebpackLoader.find(e => e.default && e.default.displayName === "TransitionGroup")
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
inputRef:React.Component
|
||||||
|
|
||||||
componentDidUpdate(e:DateInputProps){
|
componentDidUpdate(e:DateInputProps){
|
||||||
const defaultValue = this.props.defaultValue
|
const defaultValue = this.props.defaultValue
|
||||||
const dateFormat = this.props.dateFormat
|
const dateFormat = this.props.dateFormat
|
||||||
|
|
||||||
if (e.defaultValue !== defaultValue && null != defaultValue) {
|
if (e.defaultValue !== defaultValue && null != defaultValue) {
|
||||||
|
if(!this.inputRef)return
|
||||||
|
let str = getDateFNS().format(defaultValue, dateFormat)
|
||||||
|
this.inputRef["value"] = str
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
closeCalendarPicker(){
|
||||||
|
this.setState({
|
||||||
|
isCalendarPickerOpen: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getCurrentValue(){
|
||||||
|
let value = this.state.value
|
||||||
|
let dateFormat = this.props.dateFormat;
|
||||||
|
if(!value)return
|
||||||
|
if(isDateValid(value))return getDateFNS().format(value, dateFormat)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDateChange(value){
|
||||||
|
this.closeCalendarPicker()
|
||||||
|
const onChange = this.props.onChange
|
||||||
|
const name = this.props.name
|
||||||
|
this.setState((state) => {
|
||||||
|
return {
|
||||||
|
value: value,
|
||||||
|
inputResetKey: state.inputResetKey + 1
|
||||||
|
}
|
||||||
|
}, function() {
|
||||||
|
null != onChange && onChange(value, name)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputBlur(ev){
|
||||||
|
const value = this.state.value
|
||||||
|
const newvalue = ev.currentTarget.value
|
||||||
|
const iso = getDateFNS().parseISO(newvalue);
|
||||||
|
if(isDateValid(iso) && value){
|
||||||
|
if(iso.valueOf() !== value.valueOf())this.setState(function(state) {
|
||||||
|
return {
|
||||||
|
value: iso,
|
||||||
|
inputResetKey: state.inputResetKey + 1
|
||||||
|
}
|
||||||
|
}, function() {
|
||||||
|
const props = this.props
|
||||||
|
const onChange = props.onChange
|
||||||
|
const name = props.name;
|
||||||
|
if(onChange)onChange(iso, name)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleCalendarVisibility(ev){
|
||||||
|
const rect:DOMRect = ev.currentTarget.getBoundingClientRect()
|
||||||
|
const bottom = rect.bottom
|
||||||
|
const right = rect.right
|
||||||
|
const innerWidth = window.innerWidth;
|
||||||
|
this.setState(function(state) {
|
||||||
|
return {
|
||||||
|
isCalendarPickerOpen: !state.isCalendarPickerOpen,
|
||||||
|
calendarRight: innerWidth - right,
|
||||||
|
calendarTop: bottom
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setRef(ref){
|
||||||
|
this.inputRef = ref
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCalendarPicker(){
|
||||||
|
let state = this.state
|
||||||
|
let calendarRight = state.calendarRight
|
||||||
|
let calendarTop = state.calendarTop
|
||||||
|
let isCalendarPickerOpen = state.isCalendarPickerOpen
|
||||||
|
let value = state.value
|
||||||
|
let props = this.props
|
||||||
|
let minDate = props.minDate
|
||||||
|
let maxDate = props.maxDate
|
||||||
|
let endDate = props.endDate
|
||||||
|
let filterDate = props.filterDate
|
||||||
|
let startDate = props.startDate
|
||||||
|
let selectsEnd = props.selectsEnd
|
||||||
|
let selectsStart = props.selectsStart
|
||||||
|
let isModalInput = props.isModalInput
|
||||||
|
let y = props.showMonthYearPicker;
|
||||||
|
return isCalendarPickerOpen ? React.createElement(AnimatedCalendarPicker, {
|
||||||
|
value: value ? value : undefined,
|
||||||
|
onClickOutside: this.closeCalendarPicker.bind(this),
|
||||||
|
onSelect: this.handleDateChange.bind(this),
|
||||||
|
minDate: minDate,
|
||||||
|
maxDate: maxDate,
|
||||||
|
endDate: endDate,
|
||||||
|
filterDate: filterDate,
|
||||||
|
startDate: startDate,
|
||||||
|
selectsEnd: selectsEnd,
|
||||||
|
selectsStart: selectsStart,
|
||||||
|
right: calendarRight,
|
||||||
|
top: calendarTop,
|
||||||
|
isModalInput: isModalInput,
|
||||||
|
showMonthYearPicker: y
|
||||||
|
}) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
const [
|
||||||
|
Clickable,
|
||||||
|
TransitionGroup
|
||||||
|
] = this.modules
|
||||||
|
let name = this.props.name
|
||||||
|
return React.createElement(Clickable.default, {
|
||||||
|
className: getEmotion().css({
|
||||||
|
position: "relative"
|
||||||
|
})
|
||||||
|
}, React.createElement(getInternalTextInput(), {
|
||||||
|
inputClassName: getEmotion().css({
|
||||||
|
paddingRight: "32px"
|
||||||
|
}),
|
||||||
|
name: name,
|
||||||
|
onBlur: this.handleInputBlur.bind(this),
|
||||||
|
defaultValue: this.getCurrentValue(),
|
||||||
|
inputRef: this.setRef.bind(this)
|
||||||
|
}), React.createElement(Button, {
|
||||||
|
className: getEmotion().css({
|
||||||
|
"&:hover": {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
position: "absolute",
|
||||||
|
right: 0,
|
||||||
|
top: "50%",
|
||||||
|
opacity: .6,
|
||||||
|
padding: "8px",
|
||||||
|
transform: "translateY(-50%)",
|
||||||
|
transition: "opacity .125s"
|
||||||
|
}),
|
||||||
|
color: "transparent",
|
||||||
|
onMouseDown: this.toggleCalendarVisibility.bind(this),
|
||||||
|
wrapper: false
|
||||||
|
}, /*React.createElement(v.default, {
|
||||||
|
className: _.default.calendarIcon,
|
||||||
|
name: v.IconNames.CALENDAR
|
||||||
|
})*/), ReactDOM.createPortal(React.createElement(TransitionGroup.default, {
|
||||||
|
component: "div",
|
||||||
|
transitionAppear: false
|
||||||
|
}, this.renderCalendarPicker()), window.document.body))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isDateValid(date:Date){
|
||||||
|
return (date instanceof Date || typeof date === "object" || Object.prototype.toString.call(date) === "[object Date]") && !isNaN(date.valueOf())
|
||||||
|
}
|
||||||
|
|
||||||
|
let AnimatedCalendarPickerModules
|
||||||
|
export class AnimatedCalendarPicker extends React.Component<any, {
|
||||||
|
menuAnimation: any
|
||||||
|
}> {
|
||||||
|
static displayName = "AnimatedCalendarPicker"
|
||||||
|
constructor(props){
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
menuAnimation: new this.modules[0].default.Value(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get modules(){
|
||||||
|
return AnimatedCalendarPickerModules || (AnimatedCalendarPickerModules = [
|
||||||
|
WebpackLoader.findByUniqueProperties(["Value","timing"])
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillEnter(ev){
|
||||||
|
this.modules[0].default.timing(this.state.menuAnimation, {
|
||||||
|
toValue: 1,
|
||||||
|
duration: 150
|
||||||
|
}).start(ev)
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillLeave(e){
|
||||||
|
this.modules[0].default.timing(this.state.menuAnimation, {
|
||||||
|
toValue: 0,
|
||||||
|
duration: 150
|
||||||
|
}).start(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
let props = this.props,
|
||||||
|
r = props.value,
|
||||||
|
n = props.onClickOutside,
|
||||||
|
a = props.onSelect,
|
||||||
|
i = props.minDate,
|
||||||
|
o = props.maxDate,
|
||||||
|
u = props.endDate,
|
||||||
|
f = props.filterDate,
|
||||||
|
c = props.startDate,
|
||||||
|
d = props.selectsEnd,
|
||||||
|
y = props.selectsStart,
|
||||||
|
v = props.top,
|
||||||
|
g = props.right,
|
||||||
|
isModalInput = props.isModalInput,
|
||||||
|
h = props.showMonthYearPicker,
|
||||||
|
menuAnimation = this.state.menuAnimation,
|
||||||
|
E = menuAnimation.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: ["-10px", "0px"]
|
||||||
|
});
|
||||||
|
const emotion = getEmotion()
|
||||||
|
return React.createElement(this.modules[0].default.div, {
|
||||||
|
className: [emotion.css({
|
||||||
|
marginRight: "1px",
|
||||||
|
margintop: "6px",
|
||||||
|
position: "fixed",
|
||||||
|
zIndex: 2
|
||||||
|
}), isModalInput ? emotion.css({
|
||||||
|
zIndex: 10000
|
||||||
|
}) : null].filter(e=>e).join(" "),
|
||||||
|
style: {
|
||||||
|
opacity: menuAnimation,
|
||||||
|
right: g,
|
||||||
|
top: v,
|
||||||
|
transform: [{
|
||||||
|
translateY: E
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}, React.createElement(CalendarPicker, {
|
||||||
|
minDate: i,
|
||||||
|
maxDate: o,
|
||||||
|
endDate: u,
|
||||||
|
filterDate: f,
|
||||||
|
startDate: c,
|
||||||
|
selectsEnd: d,
|
||||||
|
selectsStart: y,
|
||||||
|
value: r,
|
||||||
|
onSelect: a,
|
||||||
|
onClickOutside: n,
|
||||||
|
showMonthYearPicker: h,
|
||||||
|
onChange: console.log
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CalendarPicker extends React.Component<any> {
|
||||||
|
static defaultProps = {
|
||||||
|
value: new Date()
|
||||||
|
}
|
||||||
|
static displayName = "CalendarPicker"
|
||||||
|
|
||||||
|
render(){
|
||||||
|
var e = this.props
|
||||||
|
, t = e.onClickOutside
|
||||||
|
, r = e.onSelect
|
||||||
|
, n = e.locale
|
||||||
|
, l = e.value
|
||||||
|
, o = e.endDate
|
||||||
|
, u = e.filterDate
|
||||||
|
, f = e.startDate
|
||||||
|
, c = e.minDate
|
||||||
|
, d = e.maxDate
|
||||||
|
, p = e.selectsEnd
|
||||||
|
, y = e.selectsStart
|
||||||
|
, v = e.showMonthYearPicker;
|
||||||
|
return React.createElement("div", {
|
||||||
|
className: "lc-calendarPicker"
|
||||||
|
}, React.createElement(DatePicker.default, {
|
||||||
|
fixedHeight: true,
|
||||||
|
inline: true,
|
||||||
|
selected: l,
|
||||||
|
locale: n,
|
||||||
|
onClickOutside: t,
|
||||||
|
onSelect: r,
|
||||||
|
onChange: r,
|
||||||
|
endDate: o,
|
||||||
|
filterDate: u,
|
||||||
|
startDate: f,
|
||||||
|
minDate: c,
|
||||||
|
maxDate: d,
|
||||||
|
selectsEnd: p,
|
||||||
|
selectsStart: y,
|
||||||
|
showMonthYearPicker: v
|
||||||
|
}))
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -7,6 +7,7 @@ import Text from "../general/Text"
|
||||||
export const DateConstants = {
|
export const DateConstants = {
|
||||||
DATE_FORMAT: "yyyy-MM-dd"
|
DATE_FORMAT: "yyyy-MM-dd"
|
||||||
}
|
}
|
||||||
|
import DateInput from "./DateInput"
|
||||||
export type DateRangeProps = {
|
export type DateRangeProps = {
|
||||||
dateFormat?: string,
|
dateFormat?: string,
|
||||||
defaultEnd: Date,
|
defaultEnd: Date,
|
||||||
|
@ -92,7 +93,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
|
||||||
</Text>
|
</Text>
|
||||||
</FlexChild>
|
</FlexChild>
|
||||||
<FlexChild grow={0}>
|
<FlexChild grow={0}>
|
||||||
|
<DateInput defaultValue={start} minDate={this.getMinDate()} maxDate={end} onChange={this.handleStartChange.bind(this)}
|
||||||
|
startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
|
||||||
</FlexChild>
|
</FlexChild>
|
||||||
<FlexChild grow={0}>
|
<FlexChild grow={0}>
|
||||||
<Text className="lc-dateLabel" size="small"
|
<Text className="lc-dateLabel" size="small"
|
||||||
|
@ -101,7 +103,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
|
||||||
</Text>
|
</Text>
|
||||||
</FlexChild>
|
</FlexChild>
|
||||||
<FlexChild grow={0}>
|
<FlexChild grow={0}>
|
||||||
|
<DateInput defaultValue={end} minDate={start} maxDate={this.getMaxDate()} onChange={this.handleEndChange.bind(this)}
|
||||||
|
startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
|
||||||
</FlexChild>
|
</FlexChild>
|
||||||
</Flex>
|
</Flex>
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,10 @@ type TextInputProps = {
|
||||||
onBlur?: (ev, name: string, input: TextInput) => void
|
onBlur?: (ev, name: string, input: TextInput) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getInternalTextInput(){
|
||||||
|
return TextInput.prototype.modules[0]
|
||||||
|
}
|
||||||
|
|
||||||
let TextInputModules
|
let TextInputModules
|
||||||
export default class TextInput extends React.PureComponent<TextInputProps, {value: string}> {
|
export default class TextInput extends React.PureComponent<TextInputProps, {value: string}> {
|
||||||
hasSet: boolean
|
hasSet: boolean
|
||||||
|
|
|
@ -30,6 +30,7 @@ const LightcordApi = {
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
var React:typeof import("react")
|
var React:typeof import("react")
|
||||||
|
var ReactDOM: typeof import("react-dom")
|
||||||
interface Window {
|
interface Window {
|
||||||
/**
|
/**
|
||||||
* Lightcord is only availlaible in Lightcord (native)
|
* Lightcord is only availlaible in Lightcord (native)
|
||||||
|
@ -45,7 +46,9 @@ declare global {
|
||||||
get(ids: [number|((mod:any)=>boolean)], modules?:any[]):any
|
get(ids: [number|((mod:any)=>boolean)], modules?:any[]):any
|
||||||
},
|
},
|
||||||
BdApi: typeof bandagedbdApi.BdApi,
|
BdApi: typeof bandagedbdApi.BdApi,
|
||||||
EDApi: typeof bandagedbdApi.BdApi
|
EDApi: typeof bandagedbdApi.BdApi,
|
||||||
|
ReactDOM: typeof import("react-dom"),
|
||||||
|
React:typeof import("react")
|
||||||
}
|
}
|
||||||
var Lightcord:LightcordGlobal
|
var Lightcord:LightcordGlobal
|
||||||
var BdApi: typeof bandagedbdApi.BdApi
|
var BdApi: typeof bandagedbdApi.BdApi
|
||||||
|
|
|
@ -262,3 +262,761 @@
|
||||||
.lc-dateWrapper {
|
.lc-dateWrapper {
|
||||||
padding-top: 8px
|
padding-top: 8px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*CalendarPicker*/
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||||
|
margin-left: -8px;
|
||||||
|
position: absolute
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
position: absolute;
|
||||||
|
border: 8px solid transparent;
|
||||||
|
height: 0;
|
||||||
|
width: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
border-width: 8px;
|
||||||
|
left: -8px;
|
||||||
|
border-bottom-color: #aeaeae
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
|
||||||
|
top: 0;
|
||||||
|
margin-top: -8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom-color: #f0f0f0
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
|
||||||
|
top: -1px;
|
||||||
|
border-bottom-color: #aeaeae
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||||
|
bottom: 0;
|
||||||
|
margin-bottom: -8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
|
||||||
|
border-bottom: none;
|
||||||
|
border-top-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
|
||||||
|
bottom: -1px;
|
||||||
|
border-top-color: #aeaeae
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-wrapper {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker {
|
||||||
|
font-size: .8rem;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #aeaeae;
|
||||||
|
border-radius: .3rem;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__triangle {
|
||||||
|
position: absolute;
|
||||||
|
left: 50px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper {
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=bottom] {
|
||||||
|
margin-top: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=top] {
|
||||||
|
margin-bottom: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=right] {
|
||||||
|
margin-left: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
|
||||||
|
left: auto;
|
||||||
|
right: 42px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=left] {
|
||||||
|
margin-right: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
|
||||||
|
left: 42px;
|
||||||
|
right: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__header {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-bottom: 1px solid #aeaeae;
|
||||||
|
border-top-left-radius: .3rem;
|
||||||
|
border-top-right-radius: .3rem;
|
||||||
|
padding-top: 8px;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__current-month {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .944rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation {
|
||||||
|
line-height: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 0;
|
||||||
|
border: .45rem solid transparent;
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--previous {
|
||||||
|
left: 10px;
|
||||||
|
border-right-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--previous:hover {
|
||||||
|
border-right-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--next {
|
||||||
|
right: 10px;
|
||||||
|
border-left-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--next:hover {
|
||||||
|
border-left-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--years {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--years-previous {
|
||||||
|
top: 4px;
|
||||||
|
border-top-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--years-previous:hover {
|
||||||
|
border-top-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--years-upcoming {
|
||||||
|
top: -4px;
|
||||||
|
border-bottom-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__navigation--years-upcoming:hover {
|
||||||
|
border-bottom-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-container {
|
||||||
|
display: inline;
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month {
|
||||||
|
margin: .4rem;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__week-number {
|
||||||
|
color: #ccc;
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.7rem;
|
||||||
|
line-height: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: .166rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__week-number.react-datepicker__week-number--clickable {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
|
||||||
|
border-radius: .3rem;
|
||||||
|
background-color: #f0f0f0
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day,.react-datepicker__day-name {
|
||||||
|
color: #000;
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.7rem;
|
||||||
|
line-height: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: .166rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day:hover {
|
||||||
|
border-radius: .3rem;
|
||||||
|
background-color: #f0f0f0
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--today {
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--highlighted {
|
||||||
|
border-radius: .3rem;
|
||||||
|
background-color: #3dcc4a;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--highlighted:hover {
|
||||||
|
background-color: #32be3f
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--highlighted-custom-1 {
|
||||||
|
color: #f0f
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--highlighted-custom-2 {
|
||||||
|
color: green
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected {
|
||||||
|
border-radius: .3rem;
|
||||||
|
background-color: #216ba5;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover {
|
||||||
|
background-color: #1d5d90
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--keyboard-selected {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: var(--blurple);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--keyboard-selected:hover {
|
||||||
|
background-color: #1d5d90
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
|
||||||
|
background-color: rgba(33,107,165,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #000
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--disabled {
|
||||||
|
cursor: default;
|
||||||
|
color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--disabled:hover {
|
||||||
|
background-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__input-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-read-view,.react-datepicker__year-read-view {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: .3rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-read-view:hover,.react-datepicker__year-read-view:hover {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
|
||||||
|
border-top-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||||
|
border-top-color: #ccc;
|
||||||
|
float: right;
|
||||||
|
margin-left: 20px;
|
||||||
|
top: 8px;
|
||||||
|
position: relative;
|
||||||
|
border-width: .45rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-dropdown,.react-datepicker__year-dropdown {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
left: 25%;
|
||||||
|
top: 30px;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: .3rem;
|
||||||
|
border: 1px solid #aeaeae
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-dropdown:hover,.react-datepicker__year-dropdown:hover {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable {
|
||||||
|
height: 150px;
|
||||||
|
overflow-y: scroll
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option,.react-datepicker__year-option {
|
||||||
|
line-height: 20px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option:first-of-type,.react-datepicker__year-option:first-of-type {
|
||||||
|
border-top-left-radius: .3rem;
|
||||||
|
border-top-right-radius: .3rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option:last-of-type,.react-datepicker__year-option:last-of-type {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
border-bottom-left-radius: .3rem;
|
||||||
|
border-bottom-right-radius: .3rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option:hover,.react-datepicker__year-option:hover {
|
||||||
|
background-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
|
||||||
|
border-bottom-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
|
||||||
|
border-top-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__month-option--selected,.react-datepicker__year-option--selected {
|
||||||
|
position: absolute;
|
||||||
|
left: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__close-icon {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
height: 0;
|
||||||
|
outline: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__close-icon:after {
|
||||||
|
background-color: #216ba5;
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
content: "\D7";
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
margin: -8px auto 0;
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
right: 7px;
|
||||||
|
text-align: center;
|
||||||
|
top: 50%
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__today-button {
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-top: 1px solid #aeaeae;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 5px 0;
|
||||||
|
clear: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal {
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0,0,0,.8);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
z-index: 2147483647
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
|
||||||
|
width: 3rem;
|
||||||
|
line-height: 3rem
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 550px),(max-width:400px) {
|
||||||
|
.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
|
||||||
|
width:2rem;
|
||||||
|
line-height: 2rem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__current-month {
|
||||||
|
font-size: 1.44rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__navigation {
|
||||||
|
border: .81rem solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__navigation--previous {
|
||||||
|
border-right-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__navigation--previous:hover {
|
||||||
|
border-right-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__navigation--next {
|
||||||
|
border-left-color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__portal .react-datepicker__navigation--next:hover {
|
||||||
|
border-left-color: #b3b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker {
|
||||||
|
min-width: 320px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker {
|
||||||
|
border: none;
|
||||||
|
padding: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-container {
|
||||||
|
width: 300px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day--selected,.lc-calendarPicker .react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month--selected {
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__header {
|
||||||
|
padding-top: 0;
|
||||||
|
border-bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
padding: 0 0 20px;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker-year-header {
|
||||||
|
margin-bottom: 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 6px 12px;
|
||||||
|
background-position: 50%;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
font-size: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next {
|
||||||
|
left: auto;
|
||||||
|
right: 20px;
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:first-of-type {
|
||||||
|
border-radius: 3px 0 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:last-of-type {
|
||||||
|
border-radius: 0 3px 0 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day {
|
||||||
|
border-bottom: 1px solid #dcddde
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:first-of-type {
|
||||||
|
border-radius: 0 0 0 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:last-of-type {
|
||||||
|
border-radius: 0 0 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week>.react-datepicker__day:last-of-type {
|
||||||
|
border-right: 1px solid
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day-names {
|
||||||
|
margin-bottom: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day-name {
|
||||||
|
width: 40px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day {
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-left: 1px solid
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected {
|
||||||
|
background: none;
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__monthPicker {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex: 1 1 auto;
|
||||||
|
flex: 1 1 auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-wrapper:last-child .react-datepicker__month-text {
|
||||||
|
border-bottom: 1px solid #18191c
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text {
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-left: 1px solid
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text:last-child {
|
||||||
|
border-right: 1px solid
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected {
|
||||||
|
background: none;
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day--outside-month {
|
||||||
|
font-weight: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month--in-range:not(.react-datepicker__month--in-selecting-range):not(.react-datepicker__month--disabled),.lc-calendarPicker .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__day--disabled) {
|
||||||
|
color: #f6f6f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker {
|
||||||
|
background-color: #36393f;
|
||||||
|
-webkit-box-shadow: 0 0 10px #18191c,0 2px 2px #202225;
|
||||||
|
box-shadow: 0 0 10px #18191c,0 2px 2px #202225
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__header {
|
||||||
|
background-color: #36393f;
|
||||||
|
border-color: rgba(24,25,28,.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
|
||||||
|
border-bottom-color: rgba(24,25,28,.3);
|
||||||
|
color: #f6f6f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
|
||||||
|
border-color: #18191c;
|
||||||
|
background-image: url(/assets/7619529e87dad31fd2ae83d9b9583e49.svg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day {
|
||||||
|
border-bottom-color: #18191c
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type {
|
||||||
|
border-right-color: #18191c
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day-name {
|
||||||
|
color: rgba(246,246,247,.6)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day {
|
||||||
|
border-top-color: #18191c;
|
||||||
|
border-left-color: #18191c;
|
||||||
|
color: #f6f6f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #7289da
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
|
||||||
|
background-color: #2f3136;
|
||||||
|
color: rgba(246,246,247,.3)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
|
||||||
|
background-color: #7289da
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text {
|
||||||
|
border-color: #18191c;
|
||||||
|
color: #f6f6f7;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text:last-child {
|
||||||
|
border-right-color: #18191c
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #7289da
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled:hover {
|
||||||
|
background-color: #2f3136;
|
||||||
|
color: rgba(246,246,247,.3)
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
|
||||||
|
background-color: #7289da
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-calendarPicker .react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month--outside-month {
|
||||||
|
background-color: #2f3136;
|
||||||
|
color: rgba(246,246,247,.3);
|
||||||
|
cursor: unset
|
||||||
|
}
|
Loading…
Reference in New Issue