mirror of
https://github.com/logseq/logseq.git
synced 2026-02-01 22:47:36 +00:00
add simplified datepicker
This commit is contained in:
Tienson Qin
@@ -125,16 +125,12 @@
|
||||
[:editor/set-property-on-block-property :logseq.property/query :logseq.property.code/lang "clojure"]
|
||||
[:editor/exit]])
|
||||
|
||||
(defn db-based-code-block
|
||||
(defn code-block-steps
|
||||
[]
|
||||
[[:editor/input "" {:last-pattern command-trigger}]
|
||||
[:editor/upsert-type-block :code]
|
||||
[:editor/exit]])
|
||||
|
||||
(defn code-block-steps
|
||||
[]
|
||||
(db-based-code-block))
|
||||
|
||||
(defn quote-block-steps
|
||||
[]
|
||||
[[:editor/input "" {:last-pattern command-trigger}]
|
||||
|
||||
@@ -83,8 +83,7 @@
|
||||
[logseq.shui.ui :as shui]
|
||||
[medley.core :as medley]
|
||||
[promesa.core :as p]
|
||||
[rum.core :as rum]
|
||||
[shadow.loader :as loader]))
|
||||
[rum.core :as rum]))
|
||||
|
||||
;; local state
|
||||
(defonce *dragging?
|
||||
@@ -408,7 +407,6 @@
|
||||
[state config title href metadata full_text]
|
||||
(let [src (::src state)
|
||||
^js js-url (:link-js-url config)
|
||||
repo (state/get-current-repo)
|
||||
href (cond-> href
|
||||
(nil? js-url)
|
||||
(config/get-local-asset-absolute-path))]
|
||||
@@ -3639,8 +3637,7 @@
|
||||
{:keys [lines language]} options
|
||||
attr (when language
|
||||
{:data-lang language})
|
||||
code (if lines (apply str lines) (:block/title block))
|
||||
[inside-portal? set-inside-portal?] (rum/use-state nil)]
|
||||
code (if lines (apply str lines) (:block/title block))]
|
||||
(cond
|
||||
html-export?
|
||||
(highlight/html-export attr code)
|
||||
@@ -3652,57 +3649,47 @@
|
||||
:on-mouse-leave (fn [e]
|
||||
(when (dom/has-class? (.-target e) "code-editor")
|
||||
(dom/remove-class! (hooks/deref *actions-ref) "!opacity-100")))}
|
||||
(cond
|
||||
(nil? inside-portal?) nil
|
||||
|
||||
inside-portal?
|
||||
(highlight/highlight (str (random-uuid))
|
||||
{:class (str "language-" language)
|
||||
:data-lang language}
|
||||
code)
|
||||
|
||||
:else
|
||||
[:div.ls-code-editor-wrap
|
||||
[:div.code-block-actions
|
||||
{:ref *actions-ref}
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:class "select-language"
|
||||
:ref *mode-ref
|
||||
:containerid (str container-id)
|
||||
:blockid (str (:block/uuid block))
|
||||
:on-click (fn [^js e]
|
||||
(util/stop-propagation e)
|
||||
(let [target (.-target e)]
|
||||
(shui/popup-show! target
|
||||
#(src-lang-picker block
|
||||
(fn [lang ^js _e]
|
||||
(when-let [^js cm (util/get-cm-instance (util/rec-get-node target "ls-block"))]
|
||||
(if-let [mode (get-code-mode-by-lang lang)]
|
||||
(.setOption cm "mode" mode)
|
||||
(throw (ex-info "code mode not found"
|
||||
{:lang lang})))
|
||||
(db/transact! [(ldb/kv :logseq.kv/latest-code-lang lang)])
|
||||
(db-property-handler/set-block-property!
|
||||
(:db/id block) :logseq.property.code/lang lang))))
|
||||
{:align :end})))}
|
||||
(or language "Choose language")
|
||||
(ui/icon "chevron-down"))
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:on-click (fn [^js e]
|
||||
(util/stop-propagation e)
|
||||
(when-let [^js cm (util/get-cm-instance (util/rec-get-node (.-target e) "ls-block"))]
|
||||
(util/copy-to-clipboard! (.getValue cm))
|
||||
(notification/show! "Copied!" :success)))}
|
||||
(ui/icon "copy")
|
||||
"Copy")]
|
||||
(lazy-editor/editor config (str (d/squuid)) attr code options)
|
||||
(let [options (:options options) block (:block config)]
|
||||
(when (and (= language "clojure") (contains? (set options) ":results"))
|
||||
(sci/eval-result code block)))])]))))))
|
||||
[:div.ls-code-editor-wrap
|
||||
[:div.code-block-actions
|
||||
{:ref *actions-ref}
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:class "select-language"
|
||||
:ref *mode-ref
|
||||
:containerid (str container-id)
|
||||
:blockid (str (:block/uuid block))
|
||||
:on-click (fn [^js e]
|
||||
(util/stop-propagation e)
|
||||
(let [target (.-target e)]
|
||||
(shui/popup-show! target
|
||||
#(src-lang-picker block
|
||||
(fn [lang ^js _e]
|
||||
(when-let [^js cm (util/get-cm-instance (util/rec-get-node target "ls-block"))]
|
||||
(if-let [mode (get-code-mode-by-lang lang)]
|
||||
(.setOption cm "mode" mode)
|
||||
(throw (ex-info "code mode not found"
|
||||
{:lang lang})))
|
||||
(db/transact! [(ldb/kv :logseq.kv/latest-code-lang lang)])
|
||||
(db-property-handler/set-block-property!
|
||||
(:db/id block) :logseq.property.code/lang lang))))
|
||||
{:align :end})))}
|
||||
(or language "Choose language")
|
||||
(ui/icon "chevron-down"))
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:on-click (fn [^js e]
|
||||
(util/stop-propagation e)
|
||||
(when-let [^js cm (util/get-cm-instance (util/rec-get-node (.-target e) "ls-block"))]
|
||||
(util/copy-to-clipboard! (.getValue cm))
|
||||
(notification/show! "Copied!" :success)))}
|
||||
(ui/icon "copy")
|
||||
"Copy")]
|
||||
(lazy-editor/editor config (str (d/squuid)) attr code options)
|
||||
(let [options (:options options) block (:block config)]
|
||||
(when (and (= language "clojure") (contains? (set options) ":results"))
|
||||
(sci/eval-result code block)))]]))))))
|
||||
|
||||
(defn ^:large-vars/cleanup-todo markup-element-cp
|
||||
[{:keys [html-export?] :as config} item]
|
||||
|
||||
45
src/main/frontend/components/datepicker.cljs
Normal file
45
src/main/frontend/components/datepicker.cljs
Normal file
@@ -0,0 +1,45 @@
|
||||
(ns frontend.components.datepicker
|
||||
"Datepicker component"
|
||||
(:require [cljs-time.core :as t]
|
||||
[frontend.commands :as commands]
|
||||
[frontend.date :as date]
|
||||
[frontend.handler.editor :as editor-handler]
|
||||
[frontend.state :as state]
|
||||
[frontend.ui :as ui]
|
||||
[frontend.util :as util]
|
||||
[logseq.common.util.page-ref :as page-ref]
|
||||
[rum.core :as rum]))
|
||||
|
||||
(rum/defc date-picker < rum/reactive
|
||||
{:init (fn [state]
|
||||
(when-not (:date-picker/date @state/state)
|
||||
(state/set-state! :date-picker/date (t/today)))
|
||||
state)}
|
||||
[dom-id format]
|
||||
(let [date (state/sub :date-picker/date)
|
||||
select-handler! (fn [^js d]
|
||||
;; d is nil when clicked more than once
|
||||
(when d
|
||||
(let [gd (goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))
|
||||
journal (date/js-date->journal-title gd)]
|
||||
;; similar to page reference
|
||||
(editor-handler/insert-command! dom-id
|
||||
(page-ref/->page-ref journal)
|
||||
format
|
||||
{:command :page-ref})
|
||||
(state/clear-editor-action!)
|
||||
(reset! commands/*current-command nil)
|
||||
(state/set-state! :date-picker/date d))))]
|
||||
[:div#date-time-picker.flex.flex-col.sm:flex-row
|
||||
;; inline container
|
||||
[:div.border-red-500
|
||||
(ui/nlp-calendar
|
||||
{:mode "single"
|
||||
:initial-focus true
|
||||
:show-week-number false
|
||||
:selected date
|
||||
:on-select select-handler!
|
||||
:on-day-key-down (fn [^js d _ ^js e]
|
||||
(when (= "Enter" (.-key e))
|
||||
(select-handler! d)
|
||||
(util/stop e)))})]]))
|
||||
@@ -2,6 +2,7 @@
|
||||
(:require [clojure.string :as string]
|
||||
[dommy.core :as dom]
|
||||
[frontend.commands :as commands :refer [*matched-commands]]
|
||||
[frontend.components.datepicker :as datepicker]
|
||||
[frontend.components.icon :as icon-component]
|
||||
[frontend.components.svg :as svg]
|
||||
[frontend.config :as config]
|
||||
@@ -699,6 +700,10 @@
|
||||
(state/get-editor-action))
|
||||
(state/clear-editor-action!)))}})
|
||||
|
||||
:datepicker
|
||||
(open-editor-popup! :datepicker
|
||||
(datepicker/date-picker id format) {})
|
||||
|
||||
:input
|
||||
(open-editor-popup! :input
|
||||
(editor-input id
|
||||
@@ -751,7 +756,7 @@
|
||||
|
||||
(or (contains?
|
||||
#{:commands :page-search :page-search-hashtag :block-search :template-search
|
||||
:property-search :property-value-search}
|
||||
:property-search :property-value-search :datepicker}
|
||||
action)
|
||||
(and (keyword? action)
|
||||
(= (namespace action) "editor.action")))
|
||||
|
||||
Reference in New Issue
Block a user